title

将字符串转换为标题格式，每个单词的首字母大写。

基础用法

typescript

import { title } from 'radash'

console.log(title('hello world'))        // 'Hello World'
console.log(title('hello-world'))        // 'Hello World'
console.log(title('hello_world'))        // 'Hello World'
console.log(title('helloWorld'))         // 'Hello World'

语法

typescript

function title(str: string): string

参数

str (string): 要转换的字符串

返回值

返回转换为标题格式的字符串，每个单词的首字母大写。

示例

基本转换

typescript

import { title } from 'radash'

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

处理特殊字符

typescript

import { title } from 'radash'

console.log(title('hello.world'))        // 'Hello World'
console.log(title('hello@world'))        // 'Hello World'
console.log(title('hello#world'))        // 'Hello World'
console.log(title('hello$world'))        // 'Hello World'
console.log(title('hello%world'))        // 'Hello World'
console.log(title('hello^world'))        // 'Hello World'
console.log(title('hello&world'))        // 'Hello World'

处理数字

typescript

import { title } from 'radash'

console.log(title('hello123world'))      // 'Hello123 World'
console.log(title('123hello456world'))   // '123 Hello456 World'
console.log(title('hello123'))           // 'Hello123'
console.log(title('123hello'))           // '123 Hello'

处理连续分隔符

typescript

import { title } from 'radash'

console.log(title('hello   world'))      // 'Hello World'
console.log(title('hello___world'))      // 'Hello World'
console.log(title('hello---world'))      // 'Hello World'
console.log(title('hello...world'))      // 'Hello World'

处理边界情况

typescript

import { title } from 'radash'

console.log(title(''))                   // ''
console.log(title('hello'))              // 'Hello'
console.log(title('   hello   '))        // 'Hello'
console.log(title('HELLO'))              // 'Hello'
console.log(title('hello world'))        // 'Hello World'

处理复杂字符串

typescript

import { title } from 'radash'

console.log(title('user profile component'))    // 'User Profile Component'
console.log(title('api response data'))         // 'Api Response Data'
console.log(title('http status code'))          // 'Http Status Code'
console.log(title('json web token'))            // 'Json Web Token'
console.log(title('css grid layout'))           // 'Css Grid Layout'

处理文件名

typescript

import { title } from 'radash'

console.log(title('user profile.js'))         // 'User Profile Js'
console.log(title('User Profile.tsx'))        // 'User Profile Tsx'
console.log(title('api response.json'))      // 'Api Response Json'
console.log(title('config file.yaml'))       // 'Config File Yaml'

处理CSS类名

typescript

import { title } from 'radash'

console.log(title('user profile'))            // 'User Profile'
console.log(title('user profile active'))      // 'User Profile Active'
console.log(title('user profile container'))   // 'User Profile Container'
console.log(title('user profile header'))      // 'User Profile Header'

处理数据库字段名

typescript

import { title } from 'radash'

console.log(title('user name'))               // 'User Name'
console.log(title('first name'))              // 'First Name'
console.log(title('last name'))               // 'Last Name'
console.log(title('email address'))           // 'Email Address'
console.log(title('phone number'))            // 'Phone Number'
console.log(title('created at'))              // 'Created At'
console.log(title('updated at'))              // 'Updated At'

处理API端点

typescript

import { title } from 'radash'

console.log(title('get user profile'))         // 'Get User Profile'
console.log(title('update user settings'))     // 'Update User Settings'
console.log(title('delete user account'))      // 'Delete User Account'
console.log(title('create new post'))          // 'Create New Post'
console.log(title('fetch user data'))          // 'Fetch User Data'

处理组件名

typescript

import { title } from 'radash'

console.log(title('user profile'))            // 'User Profile'
console.log(title('user profile card'))        // 'User Profile Card'
console.log(title('user profile header'))      // 'User Profile Header'
console.log(title('user profile footer'))      // 'User Profile Footer'
console.log(title('user profile content'))     // 'User Profile Content'

处理事件名

typescript

import { title } from 'radash'

console.log(title('on click'))                // 'On Click'
console.log(title('on submit'))               // 'On Submit'
console.log(title('on change'))               // 'On Change'
console.log(title('on focus'))                // 'On Focus'
console.log(title('on blur'))                 // 'On Blur'
console.log(title('on key down'))              // 'On Key Down'
console.log(title('on mouse enter'))           // 'On Mouse Enter'

处理配置键

typescript

import { title } from 'radash'

console.log(title('api base url'))             // 'Api Base Url'
console.log(title('database connection'))     // 'Database Connection'
console.log(title('redis cache'))             // 'Redis Cache'
console.log(title('session timeout'))         // 'Session Timeout'
console.log(title('max retry attempts'))      // 'Max Retry Attempts'

处理URL路径

typescript

import { title } from 'radash'

console.log(title('user profile'))            // 'User Profile'
console.log(title('user settings'))           // 'User Settings'
console.log(title('user dashboard'))          // 'User Dashboard'
console.log(title('user notifications'))      // 'User Notifications'
console.log(title('user preferences'))        // 'User Preferences'

处理HTML属性

typescript

import { title } from 'radash'

console.log(title('data user id'))             // 'Data User Id'
console.log(title('aria label'))              // 'Aria Label'
console.log(title('aria describedby'))       // 'Aria Describedby'
console.log(title('aria labelledby'))        // 'Aria Labelledby'
console.log(title('aria hidden'))             // 'Aria Hidden'

处理CSS属性

typescript

import { title } from 'radash'

console.log(title('background color'))        // 'Background Color'
console.log(title('border radius'))           // 'Border Radius'
console.log(title('font size'))               // 'Font Size'
console.log(title('line height'))             // 'Line Height'
console.log(title('text align'))              // 'Text Align'
console.log(title('margin top'))              // 'Margin Top'
console.log(title('padding left'))            // 'Padding Left'

处理JavaScript变量

typescript

import { title } from 'radash'

console.log(title('user name'))               // 'User Name'
console.log(title('first name'))              // 'First Name'
console.log(title('last name'))               // 'Last Name'
console.log(title('email address'))           // 'Email Address'
console.log(title('phone number'))            // 'Phone Number'
console.log(title('is active'))               // 'Is Active'
console.log(title('has permission'))          // 'Has Permission'

处理常量名

typescript

import { title } from 'radash'

console.log(title('api base url'))          // 'Api Base Url'
console.log(title('max retry attempts'))    // 'Max Retry Attempts'
console.log(title('default timeout'))       // 'Default Timeout'
console.log(title('user role admin'))       // 'User Role Admin'
console.log(title('session token key'))     // 'Session Token Key'

处理枚举值

typescript

import { title } from 'radash'

console.log(title('user status active'))       // 'User Status Active'
console.log(title('user status inactive'))    // 'User Status Inactive'
console.log(title('user role admin'))         // 'User Role Admin'
console.log(title('user role user'))          // 'User Role User'
console.log(title('user role guest'))         // 'User Role Guest'

处理类型名

typescript

import { title } from 'radash'

console.log(title('user profile'))            // 'User Profile'
console.log(title('user settings'))           // 'User Settings'
console.log(title('api response'))            // 'Api Response'
console.log(title('database connection'))     // 'Database Connection'
console.log(title('http status code'))         // 'Http Status Code'

处理接口名

typescript

import { title } from 'radash'

console.log(title('i user profile'))           // 'I User Profile'
console.log(title('i user settings'))          // 'I User Settings'
console.log(title('i api response'))           // 'I Api Response'
console.log(title('i database connection'))    // 'I Database Connection'
console.log(title('i http status code'))        // 'I Http Status Code'

处理函数名

typescript

import { title } from 'radash'

console.log(title('get user profile'))         // 'Get User Profile'
console.log(title('update user settings'))     // 'Update User Settings'
console.log(title('delete user account'))      // 'Delete User Account'
console.log(title('create new post'))          // 'Create New Post'
console.log(title('fetch user data'))          // 'Fetch User Data'
console.log(title('validate user input'))      // 'Validate User Input'

处理类名

typescript

import { title } from 'radash'

console.log(title('user profile service'))     // 'User Profile Service'
console.log(title('user settings controller')) // 'User Settings Controller'
console.log(title('api response handler'))     // 'Api Response Handler'
console.log(title('database connection pool')) // 'Database Connection Pool'
console.log(title('http status code mapper'))   // 'Http Status Code Mapper'

处理数据库表名

typescript

import { title } from 'radash'

console.log(title('user profile'))            // 'User Profile'
console.log(title('user settings'))           // 'User Settings'
console.log(title('api response'))            // 'Api Response'
console.log(title('database connection'))     // 'Database Connection'
console.log(title('http status code'))         // 'Http Status Code'

处理API响应字段

typescript

import { title } from 'radash'

console.log(title('response data'))           // 'Response Data'
console.log(title('error message'))           // 'Error Message'
console.log(title('status code'))             // 'Status Code'
console.log(title('request id'))              // 'Request Id'
console.log(title('timestamp'))               // 'Timestamp'

处理环境变量

typescript

import { title } from 'radash'

console.log(title('node env'))               // 'Node Env'
console.log(title('database url'))           // 'Database Url'
console.log(title('api key'))                // 'Api Key'
console.log(title('secret token'))           // 'Secret Token'
console.log(title('redis host'))             // 'Redis Host'

处理文件名转换

typescript

import { title } from 'radash'

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

console.log(convertFileName('User Profile.tsx'))     // 'User Profile'
console.log(convertFileName('api response.json'))    // 'Api Response'
console.log(convertFileName('config file.yaml'))     // 'Config File'
console.log(convertFileName('index.js'))            // 'Index'

处理变量名转换

typescript

import { title } from 'radash'

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

console.log(convertVariableName('user name'))         // 'User Name'
console.log(convertVariableName('first name'))        // 'First Name'
console.log(convertVariableName('email address'))     // 'Email Address'
console.log(convertVariableName('phone number'))      // 'Phone Number'

处理文章标题

typescript

import { title } from 'radash'

console.log(title('getting started with react'))      // 'Getting Started With React'
console.log(title('advanced typescript patterns'))    // 'Advanced Typescript Patterns'
console.log(title('best practices for api design'))   // 'Best Practices For Api Design'
console.log(title('modern javascript features'))      // 'Modern Javascript Features'

处理产品名称

typescript

import { title } from 'radash'

console.log(title('user management system'))          // 'User Management System'
console.log(title('data analytics platform'))         // 'Data Analytics Platform'
console.log(title('cloud storage solution'))          // 'Cloud Storage Solution'
console.log(title('mobile app development'))          // 'Mobile App Development'

处理菜单项

typescript

import { title } from 'radash'

console.log(title('user profile'))                   // 'User Profile'
console.log(title('account settings'))               // 'Account Settings'
console.log(title('billing information'))            // 'Billing Information'
console.log(title('privacy policy'))                 // 'Privacy Policy'
console.log(title('terms of service'))               // 'Terms Of Service'

处理错误消息

typescript

import { title } from 'radash'

console.log(title('invalid email address'))           // 'Invalid Email Address'
console.log(title('password too short'))              // 'Password Too Short'
console.log(title('user not found'))                 // 'User Not Found'
console.log(title('access denied'))                   // 'Access Denied'
console.log(title('server error'))                    // 'Server Error'

处理成功消息

typescript

import { title } from 'radash'

console.log(title('user created successfully'))       // 'User Created Successfully'
console.log(title('profile updated'))                 // 'Profile Updated'
console.log(title('password changed'))                // 'Password Changed'
console.log(title('email verified'))                  // 'Email Verified'
console.log(title('account activated'))               // 'Account Activated'

注意事项

大小写转换: 每个单词的首字母大写，其余字母小写
分隔符处理: 空格、连字符、下划线等都会被识别为单词分隔符
连续分隔符: 多个连续的分隔符会被合并为单个空格
边界处理: 开头和结尾的分隔符会被移除
特殊字符: 非字母数字字符会被转换为空格

与其他方法的区别

camel(): 转换为驼峰命名法
pascal(): 转换为帕斯卡命名法
dash(): 转换为短横线分隔格式
snake(): 转换为下划线分隔格式
title(): 转换为标题格式

实际应用场景

文章标题: 格式化文章和博客标题
产品名称: 格式化产品和服务名称
菜单项: 格式化导航菜单项
错误消息: 格式化用户友好的错误消息
成功消息: 格式化成功提示消息

title ​

基础用法 ​

语法 ​

参数 ​

返回值 ​

示例 ​

基本转换 ​

处理特殊字符 ​

处理数字 ​

处理连续分隔符 ​

处理边界情况 ​

处理复杂字符串 ​

处理文件名 ​

处理CSS类名 ​

处理数据库字段名 ​

处理API端点 ​

处理组件名 ​

处理事件名 ​

处理配置键 ​

处理URL路径 ​

处理HTML属性 ​

处理CSS属性 ​

处理JavaScript变量 ​

处理常量名 ​

处理枚举值 ​

处理类型名 ​

处理接口名 ​

处理函数名 ​

处理类名 ​

处理数据库表名 ​

处理API响应字段 ​

处理环境变量 ​

处理文件名转换 ​

处理变量名转换 ​

处理文章标题 ​

处理产品名称 ​

处理菜单项 ​

处理错误消息 ​

处理成功消息 ​

注意事项 ​

与其他方法的区别 ​

实际应用场景 ​

title

基础用法

语法

参数

返回值

示例

基本转换

处理特殊字符

处理数字

处理连续分隔符

处理边界情况

处理复杂字符串

处理文件名

处理CSS类名

处理数据库字段名

处理API端点

处理组件名

处理事件名

处理配置键

处理URL路径

处理HTML属性

处理CSS属性

处理JavaScript变量

处理常量名

处理枚举值

处理类型名

处理接口名

处理函数名

处理类名

处理数据库表名

处理API响应字段

处理环境变量

处理文件名转换

处理变量名转换

处理文章标题

处理产品名称

处理菜单项

处理错误消息

处理成功消息

注意事项

与其他方法的区别

实际应用场景