dash

將字符串轉換為短橫線分隔的格式（kebab-case）。

基礎用法

typescript

import { dash } from 'radash'

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

語法

typescript

function dash(str: string): string

參數

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

返回值

返回轉換為短橫線分隔格式的字符串。

示例

基本轉換

typescript

import { dash } from 'radash'

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

處理特殊字符

typescript

import { dash } from 'radash'

console.log(dash('hello.world'))        // 'hello-world'
console.log(dash('hello@world'))        // 'hello-world'
console.log(dash('hello#world'))        // 'hello-world'
console.log(dash('hello$world'))        // 'hello-world'
console.log(dash('hello%world'))        // 'hello-world'
console.log(dash('hello^world'))        // 'hello-world'
console.log(dash('hello&world'))        // 'hello-world'

處理數字

typescript

import { dash } from 'radash'

console.log(dash('hello123world'))      // 'hello123-world'
console.log(dash('123hello456world'))   // '123-hello456-world'
console.log(dash('hello123'))           // 'hello123'
console.log(dash('123hello'))           // '123-hello'

處理連續分隔符

typescript

import { dash } from 'radash'

console.log(dash('hello   world'))      // 'hello-world'
console.log(dash('hello___world'))      // 'hello-world'
console.log(dash('hello---world'))      // 'hello-world'
console.log(dash('hello...world'))      // 'hello-world'

處理邊界情況

typescript

import { dash } from 'radash'

console.log(dash(''))                   // ''
console.log(dash('hello'))              // 'hello'
console.log(dash('   hello   '))        // 'hello'
console.log(dash('HELLO'))              // 'hello'
console.log(dash('hello-world'))        // 'hello-world'

處理復雜字符串

typescript

import { dash } from 'radash'

console.log(dash('UserProfileComponent'))    // 'user-profile-component'
console.log(dash('APIResponseData'))         // 'api-response-data'
console.log(dash('HTTPStatusCode'))          // 'http-status-code'
console.log(dash('JSONWebToken'))            // 'json-web-token'
console.log(dash('CSSGridLayout'))           // 'css-grid-layout'

處理文件名

typescript

import { dash } from 'radash'

console.log(dash('userProfile.js'))         // 'user-profile-js'
console.log(dash('UserProfile.tsx'))        // 'user-profile-tsx'
console.log(dash('api_response.json'))      // 'api-response-json'
console.log(dash('config_file.yaml'))       // 'config-file-yaml'

處理CSS類名

typescript

import { dash } from 'radash'

console.log(dash('userProfile'))            // 'user-profile'
console.log(dash('userProfileActive'))      // 'user-profile-active'
console.log(dash('userProfileContainer'))   // 'user-profile-container'
console.log(dash('userProfileHeader'))      // 'user-profile-header'

處理數據庫字段名

typescript

import { dash } from 'radash'

console.log(dash('userName'))               // 'user-name'
console.log(dash('firstName'))              // 'first-name'
console.log(dash('lastName'))               // 'last-name'
console.log(dash('emailAddress'))           // 'email-address'
console.log(dash('phoneNumber'))            // 'phone-number'
console.log(dash('createdAt'))              // 'created-at'
console.log(dash('updatedAt'))              // 'updated-at'

處理API端點

typescript

import { dash } from 'radash'

console.log(dash('getUserProfile'))         // 'get-user-profile'
console.log(dash('updateUserSettings'))     // 'update-user-settings'
console.log(dash('deleteUserAccount'))      // 'delete-user-account'
console.log(dash('createNewPost'))          // 'create-new-post'
console.log(dash('fetchUserData'))          // 'fetch-user-data'

處理組件名

typescript

import { dash } from 'radash'

console.log(dash('UserProfile'))            // 'user-profile'
console.log(dash('UserProfileCard'))        // 'user-profile-card'
console.log(dash('UserProfileHeader'))      // 'user-profile-header'
console.log(dash('UserProfileFooter'))      // 'user-profile-footer'
console.log(dash('UserProfileContent'))     // 'user-profile-content'

處理事件名

typescript

import { dash } from 'radash'

console.log(dash('onClick'))                // 'on-click'
console.log(dash('onSubmit'))               // 'on-submit'
console.log(dash('onChange'))               // 'on-change'
console.log(dash('onFocus'))                // 'on-focus'
console.log(dash('onBlur'))                 // 'on-blur'
console.log(dash('onKeyDown'))              // 'on-key-down'
console.log(dash('onMouseEnter'))           // 'on-mouse-enter'

處理配置鍵

typescript

import { dash } from 'radash'

console.log(dash('apiBaseUrl'))             // 'api-base-url'
console.log(dash('databaseConnection'))     // 'database-connection'
console.log(dash('redisCache'))             // 'redis-cache'
console.log(dash('sessionTimeout'))         // 'session-timeout'
console.log(dash('maxRetryAttempts'))      // 'max-retry-attempts'

處理URL路徑

typescript

import { dash } from 'radash'

console.log(dash('userProfile'))            // 'user-profile'
console.log(dash('userSettings'))           // 'user-settings'
console.log(dash('userDashboard'))          // 'user-dashboard'
console.log(dash('userNotifications'))      // 'user-notifications'
console.log(dash('userPreferences'))        // 'user-preferences'

處理HTML屬性

typescript

import { dash } from 'radash'

console.log(dash('dataUserId'))             // 'data-user-id'
console.log(dash('ariaLabel'))              // 'aria-label'
console.log(dash('ariaDescribedby'))       // 'aria-describedby'
console.log(dash('ariaLabelledby'))        // 'aria-labelledby'
console.log(dash('ariaHidden'))             // 'aria-hidden'

處理CSS屬性

typescript

import { dash } from 'radash'

console.log(dash('backgroundColor'))        // 'background-color'
console.log(dash('borderRadius'))           // 'border-radius'
console.log(dash('fontSize'))               // 'font-size'
console.log(dash('lineHeight'))             // 'line-height'
console.log(dash('textAlign'))              // 'text-align'
console.log(dash('marginTop'))              // 'margin-top'
console.log(dash('paddingLeft'))            // 'padding-left'

處理JavaScript變量

typescript

import { dash } from 'radash'

console.log(dash('userName'))               // 'user-name'
console.log(dash('firstName'))              // 'first-name'
console.log(dash('lastName'))               // 'last-name'
console.log(dash('emailAddress'))           // 'email-address'
console.log(dash('phoneNumber'))            // 'phone-number'
console.log(dash('isActive'))               // 'is-active'
console.log(dash('hasPermission'))          // 'has-permission'

處理常量名

typescript

import { dash } from 'radash'

console.log(dash('API_BASE_URL'))          // 'api-base-url'
console.log(dash('MAX_RETRY_ATTEMPTS'))    // 'max-retry-attempts'
console.log(dash('DEFAULT_TIMEOUT'))       // 'default-timeout'
console.log(dash('USER_ROLE_ADMIN'))       // 'user-role-admin'
console.log(dash('SESSION_TOKEN_KEY'))     // 'session-token-key'

處理枚舉值

typescript

import { dash } from 'radash'

console.log(dash('UserStatusActive'))       // 'user-status-active'
console.log(dash('UserStatusInactive'))    // 'user-status-inactive'
console.log(dash('UserRoleAdmin'))         // 'user-role-admin'
console.log(dash('UserRoleUser'))          // 'user-role-user'
console.log(dash('UserRoleGuest'))         // 'user-role-guest'

處理類型名

typescript

import { dash } from 'radash'

console.log(dash('UserProfile'))            // 'user-profile'
console.log(dash('UserSettings'))           // 'user-settings'
console.log(dash('ApiResponse'))            // 'api-response'
console.log(dash('DatabaseConnection'))     // 'database-connection'
console.log(dash('HttpStatusCode'))         // 'http-status-code'

處理接口名

typescript

import { dash } from 'radash'

console.log(dash('IUserProfile'))           // 'i-user-profile'
console.log(dash('IUserSettings'))          // 'i-user-settings'
console.log(dash('IApiResponse'))           // 'i-api-response'
console.log(dash('IDatabaseConnection'))    // 'i-database-connection'
console.log(dash('IHttpStatusCode'))        // 'i-http-status-code'

處理函數名

typescript

import { dash } from 'radash'

console.log(dash('getUserProfile'))         // 'get-user-profile'
console.log(dash('updateUserSettings'))     // 'update-user-settings'
console.log(dash('deleteUserAccount'))      // 'delete-user-account'
console.log(dash('createNewPost'))          // 'create-new-post'
console.log(dash('fetchUserData'))          // 'fetch-user-data'
console.log(dash('validateUserInput'))      // 'validate-user-input'

處理類名

typescript

import { dash } from 'radash'

console.log(dash('UserProfileService'))     // 'user-profile-service'
console.log(dash('UserSettingsController')) // 'user-settings-controller'
console.log(dash('ApiResponseHandler'))     // 'api-response-handler'
console.log(dash('DatabaseConnectionPool')) // 'database-connection-pool'
console.log(dash('HttpStatusCodeMapper'))   // 'http-status-code-mapper'

注意事項

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

與其他方法的區別

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

實際應用場景

CSS類名: 生成CSS類名
HTML屬性: 生成HTML屬性名
URL路徑: 生成URL友好的路徑
文件名: 生成文件名
配置鍵: 生成配置文件中的鍵名

dash ​

基礎用法 ​

語法 ​

參數 ​

返回值 ​

示例 ​

基本轉換 ​

處理特殊字符 ​

處理數字 ​

處理連續分隔符 ​

處理邊界情況 ​

處理復雜字符串 ​

處理文件名 ​

處理CSS類名 ​

處理數據庫字段名 ​

處理API端點 ​

處理組件名 ​

處理事件名 ​

處理配置鍵 ​

處理URL路徑 ​

處理HTML屬性 ​

處理CSS屬性 ​

處理JavaScript變量 ​

處理常量名 ​

處理枚舉值 ​

處理類型名 ​

處理接口名 ​

處理函數名 ​

處理類名 ​

注意事項 ​

與其他方法的區別 ​

實際應用場景 ​

dash

基礎用法

語法

參數

返回值

示例

基本轉換

處理特殊字符

處理數字

處理連續分隔符

處理邊界情況

處理復雜字符串

處理文件名

處理CSS類名

處理數據庫字段名

處理API端點

處理組件名

處理事件名

處理配置鍵

處理URL路徑

處理HTML屬性

處理CSS屬性

處理JavaScript變量

處理常量名

處理枚舉值

處理類型名

處理接口名

處理函數名

處理類名

注意事項

與其他方法的區別

實際應用場景