lodash已死？radash庫方法介紹及源碼解析 —— 隨機方法 + 字符串篇
或許你最近在某個地方聽過或者看過 `radash` 這個詞，它是一個typescript編寫的方法庫，無論你是想簡單使用還是深入了解他的源碼，本系列文章都值得一讀。
前言
大家好，我是阿瓜。一個勵志想成為艾弗森的前端瓜 ~
我們已經分享了 radash 庫中數組、對象等相關的方法，大家感興趣的可以前往主頁查看閱讀；
或許你最近在某個地方聽過或者看過 radash 這個詞，它是一個typescript編寫的方法庫，如果你想試試使用它，我們有簡單使用示例，直接套用類似情景使用即可，如果你想深入了解一下這個庫，想閱讀一下它的源碼，我們也會帶你逐行解析代碼；不管是哪種，相信你都能在文章里有所收獲；
后續所有方法分享完畢后，我們會整理一份詳細目錄文章以及思維導圖，方便大家查閱使用。
隨機方法
draw：取出數組中的隨機項
-
使用說明
- 功能說明：從一個數組中隨機抽取一個元素。如果數組為空，則返回
null。 - 參數：數組。
- 返回值：數組中的隨機項。
- 功能說明：從一個數組中隨機抽取一個元素。如果數組為空，則返回
-
使用代碼示例
import { draw } from 'radash' const fish = ['marlin', 'bass', 'trout'] draw(fish) // => a random fish -
源碼解析
// 定義一個泛型函數 `draw`。 export const draw = <T>( // `array` 是一個只讀數組，包含要從中抽取元素的元素。 array: readonly T[] ): T | null => { // 獲取數組的長度。 const max = array.length // 如果數組為空（長度為0），返回 `null`。 if (max === 0) { return null } // 使用 `random` 函數獲取一個隨機索引。該索引介于 0（包括）和數組長度減1（包括）之間。 const index = random(0, max - 1) // 返回數組中該隨機索引位置的元素。 return array[index] }- 方法流程說明：
draw函數接受一個數組array作為參數。- 如果
array為空（長度為0），函數返回null。 - 如果
array非空，函數調用random函數獲取一個隨機索引，該索引在數組的有效范圍內。 - 函數返回數組中該隨機索引位置的元素。
- 方法流程說明：
random：生成一個隨機數
-
使用說明
- 功能說明：生成一個指定范圍內的隨機整數。包含最大值和最小值。
- 參數：最大值、最小值
- 返回值：返回一個范圍內的隨機整數。
-
使用代碼示例
import { random } from 'radash' random(0, 100) // => a random number between 0 and 100 -
源碼解析
// 定義一個名為 `random` 的函數。 export const random = (min: number, max: number) => { // 使用 `Math.random` 生成一個介于 0（包含）和 1（不包含）之間的隨機數， // 然后乘以 `(max - min + 1)` 使得結果分布在 `[min, max]` 的范圍內。 // 最后，使用 `Math.floor` 向下取整，以確保結果是一個整數。 return Math.floor(Math.random() * (max - min + 1) + min) }-
方法流程說明：
random函數接受兩個數字參數min和max。- 使用
Math.random()生成一個隨機浮點數，它的值在 0（包含）和 1（不包含）之間。 - 將這個隨機數乘以
(max - min + 1)，擴展其范圍到[min, max]。 - 加上
min以調整范圍的起點。 - 使用
Math.floor()對結果進行向下取整，以確保返回值是介于min和max之間的一個整數。 - 返回這個隨機整數。
-
shuffle：隨機打亂數組的順序
-
使用說明
- 功能說明：這個函數用于打亂（洗牌）一個數組中元素的順序。
- 參數：需要打亂的數組。
- 返回值：打亂后的數組。
-
使用代碼示例
import { shuffle } from 'radash' const fish = [ { name: 'Marlin', weight: 105, source: 'ocean' }, { name: 'Salmon', weight: 22, source: 'river' }, { name: 'Salmon', weight: 22, source: 'river' } ] shuffle(fish) -
源碼解析
// 定義一個泛型函數 `shuffle`。 export const shuffle = <T>(array: readonly T[]): T[] => { // 鏈式調用幾個數組方法來打亂數組。 return array // 首先，使用 `map` 方法將每個數組元素 `a` 轉換為一個包含隨機數和原始值的對象。 .map(a => ({ rand: Math.random(), value: a })) // 接著，使用 `sort` 方法對這些對象進行排序。 // 排序依據是每個對象的 `rand` 屬性，即之前生成的隨機數。 .sort((a, b) => a.rand - b.rand) // 最后，使用 `map` 方法將排序后的對象數組轉換回原始值數組。 .map(a => a.value) }-
方法流程說明：
shuffle函數接受一個數組array作為參數。- 使用
map方法生成一個新的數組，其中每個元素都是一個包含原始元素和一個隨機數的對象。 - 使用
sort方法對這個新數組進行排序。排序的依據是每個對象的隨機數屬性rand。 - 由于隨機數是隨機生成的，這種排序實際上將數組元素隨機化。
- 使用另一個
map方法提取排序后的對象數組中的原始值，并形成一個新的數組。 - 返回這個新的、已打亂順序的數組。
-
uid：生成一個指定長度的隨機標識符
-
使用說明
- 功能說明：用于生成一個指定長度的隨機字符串，該字符串由大寫字母、小寫字母、數字以及可選的特殊字符組成。
- 參數：長度、可選的隨機標識符。
- 返回值：生成的隨機字符串。
-
使用代碼示例
import { uid } from 'radash' uid(7) // => UaOKdlW uid(20, '*') // => dyJdbC*NsEgcnGjTHS -
源碼解析
// 定義一個泛型函數 `iterate`。 export const iterate = <T>( // `count` 是要執行的迭代次數。 count: number, // `func` 是每次迭代調用的函數，它接受當前的值和迭代次數，并返回新的值。 func: (currentValue: T, iteration: number) => T, // `initValue` 是迭代的初始值。 initValue: T ) => { // 初始化 `value` 為初始值。 let value = initValue // 使用 `for` 循環執行指定次數的迭代。 for (let i = 1; i <= count; i++) { // 在每次迭代中，調用 `func` 函數并更新 `value`。 value = func(value, i) } // 返回最終的 `value`。 return value } // 定義一個名為 `uid` 的函數。 export const uid = (length: number, specials: string = '') => { // 定義一個字符集，包含大小寫字母、數字，以及可選的特殊字符。 const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' + specials // 調用 `iterate` 函數生成隨機字符串。 return iterate( length, // `iterate` 函數的第二個參數是一個累加器函數，它接受當前的累加值 `acc`。 acc => { // 在每次迭代中，通過 `random` 函數獲取 `characters` 中的一個隨機字符， // 并將其添加到累加值 `acc` 末尾。 return acc + characters.charAt(random(0, characters.length - 1)) }, // `iterate` 函數的第三個參數是初始累加值，這里是一個空字符串。 '' ) }-
方法流程說明：
uid函數接受length和可選的specials作為參數。- 函數定義了一個包含所有可用字符的字符串
characters。 - 函數使用
iterate方法生成隨機字符串。iterate函數接受三個參數：迭代次數、累加器函數和初始累加值。 - 在每次迭代中，累加器函數使用
random函數獲取characters中的一個隨機索引，并通過charAt方法獲取對應的字符。 - 累加器函數將隨機字符添加到累加值
acc末尾。 iterate函數返回生成的隨機字符串。
-
series：創建一個有序的序列對象
-
使用說明
- 功能說明：用于創建一個對象，該對象提供多種操作傳入的
items數組的方法。這些方法包括獲取最小/最大元素、第一個/最后一個元素、下一個/前一個元素以及旋轉數組中元素的位置。 - 參數：數組、映射函數。
- 返回值：返回一個包含多個方法的對象。
- 功能說明：用于創建一個對象，該對象提供多種操作傳入的
-
使用代碼示例
import { series } from 'radash' type Weekday = 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' const weekdays = series<Weekday>([ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday' ]) weekdays.min('tuesday', 'thursday') // => 'tuesday' weekdays.max('wednesday', 'monday') // => 'wednesday' weekdays.next('wednesday') // => 'thursday' weekdays.previous('tuesday') // => 'monday' weekdays.first() // => 'monday' weekdays.last() // => 'friday' weekdays.next('friday') // => null weekdays.next('friday', weekdays.first()) // => 'monday' weekdays.spin('monday', 3) // => 'thursday' -
源碼解析
// 定義一個函數 `series`。 const series = (items, toKey = (item) => `${item}`) => { // 使用 `reduce` 方法構建兩個映射：一個是元素到索引的映射，另一個是索引到元素的映射。 const { indexesByKey, itemsByIndex } = items.reduce( (acc, item, idx) => ({ indexesByKey: { ...acc.indexesByKey, [toKey(item)]: idx }, itemsByIndex: { ...acc.itemsByIndex, [idx]: item } }), { indexesByKey: {}, itemsByIndex: {} } ); // 定義一個 `min` 函數，它返回兩個元素中索引較小的元素。 const min = (a, b) => { return indexesByKey[toKey(a)] < indexesByKey[toKey(b)] ? a : b; }; // 定義一個 `max` 函數，它返回兩個元素中索引較大的元素。 const max = (a, b) => { return indexesByKey[toKey(a)] > indexesByKey[toKey(b)] ? a : b; }; // 定義一個 `first` 函數，它返回數組中的第一個元素。 const first = () => { return itemsByIndex[0]; }; // 定義一個 `last` 函數，它返回數組中的最后一個元素。 const last = () => { return itemsByIndex[items.length - 1]; }; // 定義一個 `next` 函數，它返回當前元素的下一個元素，如果沒有則返回默認值或第一個元素。 const next = (current, defaultValue) => { return itemsByIndex[indexesByKey[toKey(current)] + 1] ?? defaultValue ?? first(); }; // 定義一個 `previous` 函數，它返回當前元素的前一個元素，如果沒有則返回默認值或最后一個元素。 const previous = (current, defaultValue) => { return itemsByIndex[indexesByKey[toKey(current)] - 1] ?? defaultValue ?? last(); }; // 定義一個 `spin` 函數，它根據 `num` 的值旋轉當前元素的位置。 const spin = (current, num) => { if (num === 0) return current; const abs = Math.abs(num); const rel = abs > items.length ? abs % items.length : abs; return list(0, rel - 1).reduce( (acc) => num > 0 ? next(acc) : previous(acc), current ); }; // 返回一個包含所有定義好的方法的對象。 return { min, max, first, last, next, previous, spin }; };-
方法流程說明：
series接受一個數組items和一個可選的toKey函數作為參數。- 函數使用
reduce方法構建兩個映射：indexesByKey將每個元素的鍵映射到其在數組中的索引，itemsByIndex將每個索引映射到對應的元素。 - 函數定義了一系列方法來操作
items數組，包括min、max、first、last、next、previous和spin。 min和max方法用于比較兩個元素的索引并返回索引較小或較大的元素。first和last方法分別返回數組中的第一個和最后一個元素。next和previous方法分別返回給定元素的下一個和前一個元素，如果不存在則返回默認值或第一個/最后一個元素。spin方法根據給定的數量num旋轉當前元素的位置，正數表示向后旋轉，負數表示向前旋轉。- 返回一個包含所有這些方法的對象。
-
字符串方法
camel：將字符串轉為小駝峰格式
-
使用說明
- 功能說明：用于將輸入的字符串
str轉換為駝峰命名法（camelCase）。這個函數首先將字符串中的所有大寫字母轉換為小寫，并在每個大寫字母前添加一個空格，然后根據大寫字母、點號、破折號、空格或下劃線分割字符串，最后將分割出的字符串數組轉換為駝峰式。 - 參數：字符串str。
- 返回值：轉換后的字符串。
- 功能說明：用于將輸入的字符串
-
使用代碼示例
import { camel } from 'radash' camel('green fish blue fish') // => greenFishBlueFish -
源碼解析
// 定義一個函數 `camel`。 export const camel = (str: string): string => { // 使用一系列字符串方法處理輸入字符串 `str`。 const parts = str // 使用 `replace` 方法將連續的大寫字母轉換為小寫，并在每個大寫字母前添加一個空格。 ?.replace(/([A-Z])+/g, capitalize) // 使用 `split` 方法根據大寫字母或點號、破折號、空格、下劃線分割字符串。 ?.split(/(?=[A-Z])|[\.\-\s_]/) // 使用 `map` 方法將每個字符串轉換為小寫。 .map(x => x.toLowerCase()) ?? [] // 如果處理后的字符串數組 `parts` 為空，則返回空字符串。 if (parts.length === 0) return '' // 如果 `parts` 只有一個元素，則返回該元素。 if (parts.length === 1) return parts[0] // 使用 `reduce` 方法將 `parts` 中的字符串組合成駝峰命名法。 return parts.reduce((acc, part) => { // 將當前字符串 `part` 的首字母大寫，然后將其與累加器字符串 `acc` 連接。 return `${acc}${part.charAt(0).toUpperCase()}${part.slice(1)}` }) }-
方法流程說明：
camel函數接受一個字符串str作為參數。- 使用
replace方法將連續的大寫字母轉換為小寫，并在每個大寫字母前添加一個空格。 - 使用
split方法根據大寫字母或特殊字符分割字符串。 - 使用
map方法將每個字符串轉換為小寫。 - 如果處理后的字符串數組
parts為空，則返回空字符串。 - 如果
parts只有一個元素，則返回該元素。 - 如果
parts有多個元素，使用reduce方法組合它們為駝峰命名法的字符串。 - 返回組合后的駝峰命名法字符串。
-
capitalize：將字符串首字母轉為大寫
-
使用說明
- 功能說明：于將輸入字符串
str的首字母大寫，其余字母小寫。如果輸入字符串為空或長度為0，則返回空字符串。 - 參數：需要處理的字符串。
- 返回值：處理后的字符串。
- 功能說明：于將輸入字符串
-
使用代碼示例
import { capitalize } from 'radash' capitalize('green fish blue FISH') // => Green fish blue fish -
源碼解析
// 定義一個名為 `capitalize` 的函數。 export const capitalize = (str: string): string => { // 檢查輸入字符串是否為空或長度為0，如果是，則返回空字符串。 if (!str || str.length === 0) return '' // 將整個字符串轉換為小寫。 const lower = str.toLowerCase() // 返回一個新字符串，其中首字母大寫，其余部分為小寫。 // 使用 `substring` 方法獲取第一個字符并將其轉換為大寫， // 然后將其與字符串的剩余部分（從第二個字符開始）連接起來。 return lower.substring(0, 1).toUpperCase() + lower.substring(1, lower.length) }-
方法流程說明：
capitalize函數接受一個字符串str作為參數。- 檢查
str是否為空或長度為0，如果是，則返回空字符串。 - 將整個字符串轉換為小寫。
- 使用
substring方法獲取字符串的第一個字符，并使用toUpperCase方法將其轉換為大寫。 - 使用另一個
substring方法獲取字符串的剩余部分（從第二個字符開始）。 - 將首字母大寫的字符與剩余的小寫字符串連接起來。
- 返回處理后的字符串。
-
dash：把字符串轉為短橫線（-）分隔并且全小寫的格式
-
使用說明
- 功能說明：用于將輸入字符串
str轉換為短橫線命名法（kebab-case）。這個函數首先將字符串中的所有大寫字母轉換為小寫，并在每個大寫字母前添加一個短橫線，然后根據大寫字母、點號、破折號、空格或下劃線分割字符串，最后將分割出的字符串數組轉換為短橫線命名法。 - 參數：需要處理的字符串。
- 返回值：組合后的短橫線命名法字符串。
- 功能說明：用于將輸入字符串
-
使用代碼示例
import { dash } from 'radash' dash('green fish blue fish') // => green-fish-blue-fish -
源碼解析
// 定義一個名為 `dash` 的函數。 export const dash = (str: string): string => { // 使用一系列字符串方法處理輸入字符串 `str`。 const parts = str // 使用 `replace` 方法將連續的大寫字母轉換為小寫，并在每個大寫字母前添加一個短橫線。 // 這里假設 `capitalize` 函數會進行相應的轉換，但實際上這可能不是預期的行為。 ?.replace(/([A-Z])+/g, capitalize) // 使用 `split` 方法根據大寫字母或點號、破折號、空格、下劃線分割字符串。 ?.split(/(?=[A-Z])|[\.\-\s_]/) // 使用 `map` 方法將每個字符串轉換為小寫。 .map(x => x.toLowerCase()) ?? [] // 如果處理后的字符串數組 `parts` 為空，則返回空字符串。 if (parts.length === 0) return '' // 如果 `parts` 只有一個元素，則返回該元素。 if (parts.length === 1) return parts[0] // 使用 `reduce` 方法將 `parts` 中的字符串組合成短橫線命名法。 return parts.reduce((acc, part) => { // 將當前字符串 `part` 轉換為小寫，并用短橫線連接到累加器字符串 `acc`。 return `${acc}-${part.toLowerCase()}` }) }-
方法流程說明：
dash函數接受一個字符串str作為參數。- 使用
replace方法將大寫字母前添加短橫線并轉換為小寫。 - 使用
split方法根據特殊字符分割字符串。 - 使用
map方法將每個字符串轉換為小寫。 - 如果處理后的字符串數組
parts為空，則返回空字符串。 - 如果
parts只有一個元素，則返回該元素。 - 如果
parts有多個元素，使用reduce方法組合它們為短橫線命名法的字符串。 - 返回組合后的短橫線命名法字符串。
-
pascal：將字符串轉為大駝峰命名的格式
-
使用說明
- 功能說明：用于將輸入字符串
str轉換為帕斯卡命名法（PascalCase），即每個單詞的首字母大寫，其余字母小寫，且單詞之間沒有分隔符。如果輸入字符串為空或長度為0，則返回空字符串。 - 參數：需要處理的字符串。
- 返回值：處理后的大駝峰命名法的字符串。
- 功能說明：用于將輸入字符串
-
使用代碼示例
import { pascal } from 'radash' pascal('hello world') // => 'HelloWorld' pascal('va va boom') // => 'VaVaBoom' -
源碼解析
// 定義一個名為 `pascal` 的函數。 export const pascal = (str: string): string => { // 使用 `split` 方法根據點號、破折號、空格、下劃線分割字符串，并將每個部分轉換為小寫。 const parts = str?.split(/[\.\-\s_]/).map(x => x.toLowerCase()) ?? [] // 如果處理后的字符串數組 `parts` 為空，則返回空字符串。 if (parts.length === 0) return '' // 使用 `map` 方法將 `parts` 中的每個字符串的首字母大寫。 // 使用 `charAt` 方法獲取第一個字符并將其轉換為大寫， // 然后將其與字符串的剩余部分（從第二個字符開始）連接起來。 // 使用 `join` 方法將這些首字母大寫的字符串連接成一個單一的字符串。 return parts.map(str => str.charAt(0).toUpperCase() + str.slice(1)).join('') }-
方法流程說明：
pascal函數接受一個字符串str作為參數。- 使用
split方法根據特殊字符分割字符串，并將每個字符串轉換為小寫。 - 如果處理后的字符串數組
parts為空，則返回空字符串。 - 使用
map方法遍歷parts數組，將每個字符串的首字母大寫。 - 使用
join方法將首字母大寫的字符串數組連接成一個單一的字符串。 - 返回處理后的帕斯卡命名法字符串。
-
snake：將字符串轉換為下劃線格式
-
使用說明
- 功能說明：用于將輸入字符串
str轉換為蛇形命名法（snake_case）。這個函數接受一個字符串和一個可選的options對象作為參數，options對象中的splitOnNumber屬性用于指定是否在字母和緊隨其后的數字之間添加下劃線。 - 參數：需要處理的字符串、配置對象（可選）。
- 返回值：處理后的字符串。
- 功能說明：用于將輸入字符串
-
使用代碼示例
import { snake } from 'radash' snake('green fish blue fish') // => green_fish_blue_fish snake('5green fish 2blue fish') // => 5_green_fish_2_blue_fish snake('5green fish 2blue fish', { splitOnNumber: false }) // => 5green_fish_2blue_fish -
源碼解析
// 定義一個名為 `snake` 的函數。 export const snake = ( // `str` 是要轉換的字符串。 str: string, // `options` 是一個可選的配置對象。 options?: { // `splitOnNumber` 用于指定是否在字母和數字之間添加下劃線。 splitOnNumber?: boolean } ): string => { // 使用 `replace` 和 `split` 方法處理輸入字符串 `str`，并將每個部分轉換為小寫。 const parts = str // 使用 `replace` 方法將連續的大寫字母轉換為大寫，并在每個大寫字母前添加一個空格。 ?.replace(/([A-Z])+/g, capitalize) // 使用 `split` 方法根據大寫字母或點號、破折號、空格、下劃線分割字符串。 .split(/(?=[A-Z])|[\.\-\s_]/) // 使用 `map` 方法將每個字符串轉換為小寫。 .map(x => x.toLowerCase()) ?? [] // 如果處理后的字符串數組 `parts` 為空，則返回空字符串。 if (parts.length === 0) return '' // 如果 `parts` 只有一個元素，則返回該元素。 if (parts.length === 1) return parts[0] // 使用 `reduce` 方法將 `parts` 中的字符串組合成蛇形命名法。 const result = parts.reduce((acc, part) => { // 將當前字符串 `part` 轉換為小寫，并用下劃線連接到累加器字符串 `acc`。 return `${acc}_${part.toLowerCase()}` }) // 根據 `options` 中的 `splitOnNumber` 屬性確定是否在字母和數字之間添加下劃線。 return options?.splitOnNumber === false ? result // 如果 `splitOnNumber` 不是 false，使用 `replace` 方法在字母和緊隨其后的數字之間添加下劃線。 : result.replace(/([A-Za-z]{1}[0-9]{1})/, val => `${val[0]!}_${val[1]!}`) }-
方法流程說明：
snake函數接受一個字符串str和一個可選的配置對象options作為參數。- 使用
replace方法和split方法將字符串分割成小寫的部分，并存儲在parts數組中。 - 如果
parts數組為空，則返回空字符串。 - 如果
parts數組只有一個元素，則返回該元素。 - 如果
parts數組有多個元素，使用reduce方法組合它們為蛇形命名法的字符串。 - 如果
options對象中的splitOnNumber屬性為false，則返回組合后的結果字符串result。 - 如果
options對象中的splitOnNumber屬性不是false或未指定，使用replace方法在字母和數字之間添加下劃線。 - 返回處理后的蛇形命名法字符串。
-
template：在字符串中使用模板變量
-
使用說明
- 功能說明：用于根據提供的數據對象
data替換字符串str中的模板占位符。函數接受三個參數：一個字符串str，一個數據對象data，以及一個可選的正則表達式regex用于匹配模板占位符。 - 參數：字符串、要替換占位符的鍵值對對象。
- 返回值：替換后的字符串。
- 功能說明：用于根據提供的數據對象
-
使用代碼示例
import { template } from 'radash' template('It is {{color}}', { color: 'blue' }) // => It is blue template('It is <color>', { color: 'blue' }, /<(.+?)>/g) // => It is blue -
源碼解析
// 定義一個名為 `template` 的函數。 export const template = ( // `str` 是包含模板占位符的字符串。 str: string, // `data` 是一個對象，包含要替換占位符的鍵值對。 data: Record<string, any>, // `regex` 是一個可選的正則表達式，默認匹配雙花括號內的內容。 regex = /\{\{(.+?)\}\}/g ) => { // 使用 `matchAll` 方法和提供的正則表達式來匹配 `str` 中所有的模板占位符。 return Array.from(str.matchAll(regex)).reduce((acc, match) => { // 在每次迭代中，使用 `replace` 方法將當前匹配的占位符 `match[0]` // 替換為 `data` 對象中對應鍵 `match[1]` 的值。 return acc.replace(match[0], data[match[1]]) }, str) // 初始累加器是原始字符串 `str`。 }-
方法流程說明：
template函數接受一個字符串str，一個數據對象data，以及一個正則表達式regex作為參數。- 函數使用
matchAll方法和正則表達式regex來查找str中所有的模板占位符。 - 函數使用
reduce方法遍歷匹配結果數組。 - 對于每個匹配的占位符，函數從
data對象中獲取對應的值并替換占位符。 - 返回替換后的字符串。
-
title：將字符串轉換為首字母大寫格式
-
使用說明
- 功能說明：用于將輸入字符串
str轉換為標題格式（Title Case），其中每個單詞的首字母大寫，其余字母小寫，單詞之間用空格分隔。如果輸入字符串為空、null或undefined，則返回空字符串。 - 參數：字符串（可能為
null、undefined)。 - 返回值：處理后的字符串。
- 功能說明：用于將輸入字符串
-
使用代碼示例
import { title } from 'radash' title('hello world') // => 'Hello World' title('va_va_boom') // => 'Va Va Boom' title('root-hook') // => 'Root Hook' title('queryItems') // => 'Query Items' -
源碼解析
// 定義一個名為 `title` 的函數。 export const title = (str: string | null | undefined): string => { // 檢查輸入字符串是否為空、null 或 undefined，如果是，則返回空字符串。 if (!str) return '' // 使用鏈式調用字符串方法來處理輸入字符串 `str`。 return str // 使用 `split` 方法根據大寫字母或特殊字符（點號、破折號、空格、下劃線）分割字符串。 .split(/(?=[A-Z])|[\.\-\s_]/) // 使用 `map` 方法去除每個部分的前后空白字符。 .map(s => s.trim()) // 使用 `filter` 方法移除空字符串。 .filter(s => !!s) // 使用 `map` 方法將每個部分轉換為小寫，并使用 `capitalize` 函數將首字母大寫。 .map(s => capitalize(s.toLowerCase())) // 使用 `join` 方法將處理后的字符串數組用空格連接成一個單一的字符串。 .join(' ') }-
方法流程說明：
title函數接受一個可能為空、null或undefined的字符串str作為參數。- 如果
str是空、null或undefined，函數返回空字符串。 - 使用
split方法將字符串分割成單詞數組。 - 使用
map方法去除單詞的前后空白字符。 - 使用
filter方法移除空字符串，確保只處理實際的單詞。 - 使用另一個
map方法將每個單詞轉換為小寫，并使用capitalize函數將單詞的首字母大寫。 - 使用
join方法將單詞數組連接成一個單一的字符串，單詞之間用空格分隔。 - 返回處理后的標題格式字符串。。
-
trim：去除字符串首尾的指定字符
-
使用說明
- 功能說明：用于從字符串的開頭和結尾去除指定的字符。如果輸入字符串為空、
null或undefined，則返回空字符串。charsToTrim參數指定了要去除的字符，默認為去除空格。 - 參數：需要處理的字符串、需要刪除的字符。
- 返回值：處理后的字符串。
- 功能說明：用于從字符串的開頭和結尾去除指定的字符。如果輸入字符串為空、
-
使用代碼示例
import { trim } from 'radash' trim(' hello ') // => hello trim('__hello__', '_') // => hello trim('/repos/:owner/', '/') // => repos/:owner -
源碼解析
// 定義一個名為 `trim` 的函數。 export const trim = ( // `str` 是要處理的字符串，可以為空、null 或 undefined。 str: string | null | undefined, // `charsToTrim` 是一個字符串，包含要從 `str` 的開頭和結尾去除的字符，默認為去除空格。 charsToTrim: string = ' ' ) => { // 如果 `str` 為空、null 或 undefined，返回空字符串。 if (!str) return '' // 使用 `replace` 方法將 `charsToTrim` 中的非字母數字字符轉義， // 以確保在創建正則表達式時將它們視為普通字符而非特殊字符。 const toTrim = charsToTrim.replace(/[\W]{1}/g, '\\$&') // 創建一個正則表達式，用于匹配 `str` 開頭和結尾的 `toTrim` 中的字符。 const regex = new RegExp(`^[${toTrim}]+|[${toTrim}]+$`, 'g') // 使用 `replace` 方法和正則表達式 `regex` 從 `str` 的開頭和結尾去除匹配的字符。 return str.replace(regex, '') }-
方法流程說明：
trim函數接受一個字符串str和一個要去除的字符集charsToTrim作為參數。- 如果
str是空、null或undefined，函數返回空字符串。 charsToTrim中的非字母數字字符被轉義，以便在正則表達式中作為普通字符處理。- 使用
new RegExp創建一個正則表達式，它匹配str開頭和結尾的charsToTrim中的字符。 - 使用
replace方法將匹配的字符替換為空字符串，從而去除str開頭和結尾的charsToTrim中的字符。 - 返回處理后的字符串。
-
最后
我相信能看到最后的都是帥氣多金又想進步的~~~~人才。
如果你想查看其他 radash 相關方法，前往主頁查看
等所有方法更新完畢，作者會整理一份radash完整方法目錄上傳，包括思維導圖和使用目錄。
大家有任何問題或見解，歡迎評論區留言交流和批評指正！！！
你的每一個收藏都是作者寫作的動力！！！
浙公網安備 33010602011771號