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響應字段

處理環境變量

處理文件名轉換

處理變量名轉換

處理文章標題

處理產品名稱

處理菜單項

處理錯誤消息

處理成功消息

注意事項

與其他方法的區別

實際應用場景