snake

將字符串轉換為下劃線分隔的格式（snake_case）。

基礎用法

typescript

import { snake } from 'radash'

console.log(snake('hello world'))        // 'hello_world'
console.log(snake('HelloWorld'))         // 'hello_world'
console.log(snake('hello-world'))        // 'hello_world'
console.log(snake('helloWorld'))         // 'hello_world'

語法

typescript

function snake(str: string): string

參數

str (string): 要轉換的字符串

返回值

返回轉換為下劃線分隔格式的字符串。

示例

基本轉換

typescript

import { snake } from 'radash'

console.log(snake('hello world'))        // 'hello_world'
console.log(snake('Hello World'))        // 'hello_world'
console.log(snake('HELLO WORLD'))        // 'hello_world'
console.log(snake('helloWorld'))         // 'hello_world'
console.log(snake('HelloWorld'))         // 'hello_world'
console.log(snake('hello_world'))        // 'hello_world'
console.log(snake('hello-world'))        // 'hello_world'

處理特殊字符

typescript

import { snake } from 'radash'

console.log(snake('hello.world'))        // 'hello_world'
console.log(snake('hello@world'))        // 'hello_world'
console.log(snake('hello#world'))        // 'hello_world'
console.log(snake('hello$world'))        // 'hello_world'
console.log(snake('hello%world'))        // 'hello_world'
console.log(snake('hello^world'))        // 'hello_world'
console.log(snake('hello&world'))        // 'hello_world'

處理數字

typescript

import { snake } from 'radash'

console.log(snake('hello123world'))      // 'hello123_world'
console.log(snake('123hello456world'))   // '123_hello456_world'
console.log(snake('hello123'))           // 'hello123'
console.log(snake('123hello'))           // '123_hello'

處理連續分隔符

typescript

import { snake } from 'radash'

console.log(snake('hello   world'))      // 'hello_world'
console.log(snake('hello___world'))      // 'hello_world'
console.log(snake('hello---world'))      // 'hello_world'
console.log(snake('hello...world'))      // 'hello_world'

處理邊界情況

typescript

import { snake } from 'radash'

console.log(snake(''))                   // ''
console.log(snake('hello'))              // 'hello'
console.log(snake('   hello   '))        // 'hello'
console.log(snake('HELLO'))              // 'hello'
console.log(snake('hello_world'))        // 'hello_world'

處理復雜字符串

typescript

import { snake } from 'radash'

console.log(snake('UserProfileComponent'))    // 'user_profile_component'
console.log(snake('APIResponseData'))         // 'api_response_data'
console.log(snake('HTTPStatusCode'))          // 'http_status_code'
console.log(snake('JSONWebToken'))            // 'json_web_token'
console.log(snake('CSSGridLayout'))           // 'css_grid_layout'

處理文件名

typescript

import { snake } from 'radash'

console.log(snake('userProfile.js'))         // 'user_profile_js'
console.log(snake('UserProfile.tsx'))        // 'user_profile_tsx'
console.log(snake('api_response.json'))      // 'api_response_json'
console.log(snake('config_file.yaml'))       // 'config_file_yaml'

處理CSS類名

typescript

import { snake } from 'radash'

console.log(snake('userProfile'))            // 'user_profile'
console.log(snake('userProfileActive'))      // 'user_profile_active'
console.log(snake('userProfileContainer'))   // 'user_profile_container'
console.log(snake('userProfileHeader'))      // 'user_profile_header'

處理數據庫字段名

typescript

import { snake } from 'radash'

console.log(snake('userName'))               // 'user_name'
console.log(snake('firstName'))              // 'first_name'
console.log(snake('lastName'))               // 'last_name'
console.log(snake('emailAddress'))           // 'email_address'
console.log(snake('phoneNumber'))            // 'phone_number'
console.log(snake('createdAt'))              // 'created_at'
console.log(snake('updatedAt'))              // 'updated_at'

處理API端點

typescript

import { snake } from 'radash'

console.log(snake('getUserProfile'))         // 'get_user_profile'
console.log(snake('updateUserSettings'))     // 'update_user_settings'
console.log(snake('deleteUserAccount'))      // 'delete_user_account'
console.log(snake('createNewPost'))          // 'create_new_post'
console.log(snake('fetchUserData'))          // 'fetch_user_data'

處理組件名

typescript

import { snake } from 'radash'

console.log(snake('UserProfile'))            // 'user_profile'
console.log(snake('UserProfileCard'))        // 'user_profile_card'
console.log(snake('UserProfileHeader'))      // 'user_profile_header'
console.log(snake('UserProfileFooter'))      // 'user_profile_footer'
console.log(snake('UserProfileContent'))     // 'user_profile_content'

處理事件名

typescript

import { snake } from 'radash'

console.log(snake('onClick'))                // 'on_click'
console.log(snake('onSubmit'))               // 'on_submit'
console.log(snake('onChange'))               // 'on_change'
console.log(snake('onFocus'))                // 'on_focus'
console.log(snake('onBlur'))                 // 'on_blur'
console.log(snake('onKeyDown'))              // 'on_key_down'
console.log(snake('onMouseEnter'))           // 'on_mouse_enter'

處理配置鍵

typescript

import { snake } from 'radash'

console.log(snake('apiBaseUrl'))             // 'api_base_url'
console.log(snake('databaseConnection'))     // 'database_connection'
console.log(snake('redisCache'))             // 'redis_cache'
console.log(snake('sessionTimeout'))         // 'session_timeout'
console.log(snake('maxRetryAttempts'))      // 'max_retry_attempts'

處理URL路徑

typescript

import { snake } from 'radash'

console.log(snake('userProfile'))            // 'user_profile'
console.log(snake('userSettings'))           // 'user_settings'
console.log(snake('userDashboard'))          // 'user_dashboard'
console.log(snake('userNotifications'))      // 'user_notifications'
console.log(snake('userPreferences'))        // 'user_preferences'

處理HTML屬性

typescript

import { snake } from 'radash'

console.log(snake('dataUserId'))             // 'data_user_id'
console.log(snake('ariaLabel'))              // 'aria_label'
console.log(snake('ariaDescribedby'))       // 'aria_describedby'
console.log(snake('ariaLabelledby'))        // 'aria_labelledby'
console.log(snake('ariaHidden'))             // 'aria_hidden'

處理CSS屬性

typescript

import { snake } from 'radash'

console.log(snake('backgroundColor'))        // 'background_color'
console.log(snake('borderRadius'))           // 'border_radius'
console.log(snake('fontSize'))               // 'font_size'
console.log(snake('lineHeight'))             // 'line_height'
console.log(snake('textAlign'))              // 'text_align'
console.log(snake('marginTop'))              // 'margin_top'
console.log(snake('paddingLeft'))            // 'padding_left'

處理JavaScript變量

typescript

import { snake } from 'radash'

console.log(snake('userName'))               // 'user_name'
console.log(snake('firstName'))              // 'first_name'
console.log(snake('lastName'))               // 'last_name'
console.log(snake('emailAddress'))           // 'email_address'
console.log(snake('phoneNumber'))            // 'phone_number'
console.log(snake('isActive'))               // 'is_active'
console.log(snake('hasPermission'))          // 'has_permission'

處理常量名

typescript

import { snake } from 'radash'

console.log(snake('API_BASE_URL'))          // 'api_base_url'
console.log(snake('MAX_RETRY_ATTEMPTS'))    // 'max_retry_attempts'
console.log(snake('DEFAULT_TIMEOUT'))       // 'default_timeout'
console.log(snake('USER_ROLE_ADMIN'))       // 'user_role_admin'
console.log(snake('SESSION_TOKEN_KEY'))     // 'session_token_key'

處理枚舉值

typescript

import { snake } from 'radash'

console.log(snake('UserStatusActive'))       // 'user_status_active'
console.log(snake('UserStatusInactive'))    // 'user_status_inactive'
console.log(snake('UserRoleAdmin'))         // 'user_role_admin'
console.log(snake('UserRoleUser'))          // 'user_role_user'
console.log(snake('UserRoleGuest'))         // 'user_role_guest'

處理類型名

typescript

import { snake } from 'radash'

console.log(snake('UserProfile'))            // 'user_profile'
console.log(snake('UserSettings'))           // 'user_settings'
console.log(snake('ApiResponse'))            // 'api_response'
console.log(snake('DatabaseConnection'))     // 'database_connection'
console.log(snake('HttpStatusCode'))         // 'http_status_code'

處理接口名

typescript

import { snake } from 'radash'

console.log(snake('IUserProfile'))           // 'i_user_profile'
console.log(snake('IUserSettings'))          // 'i_user_settings'
console.log(snake('IApiResponse'))           // 'i_api_response'
console.log(snake('IDatabaseConnection'))    // 'i_database_connection'
console.log(snake('IHttpStatusCode'))        // 'i_http_status_code'

處理函數名

typescript

import { snake } from 'radash'

console.log(snake('getUserProfile'))         // 'get_user_profile'
console.log(snake('updateUserSettings'))     // 'update_user_settings'
console.log(snake('deleteUserAccount'))      // 'delete_user_account'
console.log(snake('createNewPost'))          // 'create_new_post'
console.log(snake('fetchUserData'))          // 'fetch_user_data'
console.log(snake('validateUserInput'))      // 'validate_user_input'

處理類名

typescript

import { snake } from 'radash'

console.log(snake('UserProfileService'))     // 'user_profile_service'
console.log(snake('UserSettingsController')) // 'user_settings_controller'
console.log(snake('ApiResponseHandler'))     // 'api_response_handler'
console.log(snake('DatabaseConnectionPool')) // 'database_connection_pool'
console.log(snake('HttpStatusCodeMapper'))   // 'http_status_code_mapper'

處理數據庫表名

typescript

import { snake } from 'radash'

console.log(snake('UserProfile'))            // 'user_profile'
console.log(snake('UserSettings'))           // 'user_settings'
console.log(snake('ApiResponse'))            // 'api_response'
console.log(snake('DatabaseConnection'))     // 'database_connection'
console.log(snake('HttpStatusCode'))         // 'http_status_code'

處理API響應字段

typescript

import { snake } from 'radash'

console.log(snake('responseData'))           // 'response_data'
console.log(snake('errorMessage'))           // 'error_message'
console.log(snake('statusCode'))             // 'status_code'
console.log(snake('requestId'))              // 'request_id'
console.log(snake('timestamp'))              // 'timestamp'

處理環境變量

typescript

import { snake } from 'radash'

console.log(snake('NODE_ENV'))               // 'node_env'
console.log(snake('DATABASE_URL'))           // 'database_url'
console.log(snake('API_KEY'))                // 'api_key'
console.log(snake('SECRET_TOKEN'))           // 'secret_token'
console.log(snake('REDIS_HOST'))             // 'redis_host'

處理文件名轉換

typescript

import { snake } from 'radash'

function convertFileName(fileName: string): string {
  return snake(fileName.replace(/\.[^/.]+$/, '')) // 移除擴展名
}

console.log(convertFileName('UserProfile.tsx'))     // 'user_profile'
console.log(convertFileName('apiResponse.json'))    // 'api_response'
console.log(convertFileName('configFile.yaml'))     // 'config_file'
console.log(convertFileName('index.js'))            // 'index'

處理變量名轉換

typescript

import { snake } from 'radash'

function convertVariableName(varName: string): string {
  return snake(varName)
}

console.log(convertVariableName('userName'))         // 'user_name'
console.log(convertVariableName('firstName'))        // 'first_name'
console.log(convertVariableName('emailAddress'))     // 'email_address'
console.log(convertVariableName('phoneNumber'))      // 'phone_number'

注意事項

大小寫轉換: 所有字符都會轉換為小寫
分隔符處理: 空格、連字符、點號等都會被轉換為下劃線
連續分隔符: 多個連續的分隔符會被合並為單個下劃線
邊界處理: 開頭和結尾的分隔符會被移除
特殊字符: 非字母數字字符會被轉換為下劃線

與其他方法的區別

camel(): 轉換為駝峰命名法
pascal(): 轉換為帕斯卡命名法
dash(): 轉換為短橫線分隔格式
snake(): 轉換為下劃線分隔格式

實際應用場景

數據庫字段名: 生成數據庫字段名
API參數名: 生成API參數名
配置文件鍵名: 生成配置文件中的鍵名
文件名: 生成文件名
變量名: 生成變量名

snake ​

基礎用法 ​

語法 ​

參數 ​

返回值 ​

示例 ​

基本轉換 ​

處理特殊字符 ​

處理數字 ​

處理連續分隔符 ​

處理邊界情況 ​

處理復雜字符串 ​

處理文件名 ​

處理CSS類名 ​

處理數據庫字段名 ​

處理API端點 ​

處理組件名 ​

處理事件名 ​

處理配置鍵 ​

處理URL路徑 ​

處理HTML屬性 ​

處理CSS屬性 ​

處理JavaScript變量 ​

處理常量名 ​

處理枚舉值 ​

處理類型名 ​

處理接口名 ​

處理函數名 ​

處理類名 ​

處理數據庫表名 ​

處理API響應字段 ​

處理環境變量 ​

處理文件名轉換 ​

處理變量名轉換 ​

注意事項 ​

與其他方法的區別 ​

實際應用場景 ​

snake

基礎用法

語法

參數

返回值

示例

基本轉換

處理特殊字符

處理數字

處理連續分隔符

處理邊界情況

處理復雜字符串

處理文件名

處理CSS類名

處理數據庫字段名

處理API端點

處理組件名

處理事件名

處理配置鍵

處理URL路徑

處理HTML屬性

處理CSS屬性

處理JavaScript變量

處理常量名

處理枚舉值

處理類型名

處理接口名

處理函數名

處理類名

處理數據庫表名

處理API響應字段

處理環境變量

處理文件名轉換

處理變量名轉換

注意事項

與其他方法的區別

實際應用場景