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变量

处理常量名

处理枚举值

处理类型名

处理接口名

处理函数名

处理类名

注意事项

与其他方法的区别

实际应用场景