前言
大家好,我是阿瓜。一个励志想成为艾弗森的前端瓜 ~
我们已经分享了 radash
库中数组、对象等相关的方法,大家感兴趣的可以前往主页查看阅读;
或许你最近在某个地方听过或者看过 radash
这个词,它是一个typescript编写的方法库,如果你想试试使用它,我们有简单使用示例,直接套用类似情景使用即可,如果你想深入了解一下这个库,想阅读一下它的源码,我们也会带你逐行解析代码;不管是哪种,相信你都能在文章里有所收获;
后续所有方法分享完毕后,我们会整理一份详细目录文章以及思维导图,方便大家查阅使用。
随机方法
draw:取出数组中的随机项
-
使用说明
- 功能说明:从一个数组中随机抽取一个元素。如果数组为空,则返回
null
。 - 参数:数组。
- 返回值:数组中的随机项。
- 功能说明:从一个数组中随机抽取一个元素。如果数组为空,则返回
-
使用代码示例
jsimport { draw } from 'radash' const fish = ['marlin', 'bass', 'trout'] draw(fish) // => a random fish
-
源码解析
js// 定义一个泛型函数 `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:生成一个随机数
-
使用说明
- 功能说明:生成一个指定范围内的随机整数。包含最大值和最小值。
- 参数:最大值、最小值
- 返回值:返回一个范围内的随机整数。
-
使用代码示例
jsimport { random } from 'radash' random(0, 100) // => a random number between 0 and 100
-
源码解析
js// 定义一个名为 `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:随机打乱数组的顺序
-
使用说明
- 功能说明:这个函数用于打乱(洗牌)一个数组中元素的顺序。
- 参数:需要打乱的数组。
- 返回值:打乱后的数组。
-
使用代码示例
jsimport { 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)
-
源码解析
js// 定义一个泛型函数 `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:生成一个指定长度的随机标识符
-
使用说明
- 功能说明:用于生成一个指定长度的随机字符串,该字符串由大写字母、小写字母、数字以及可选的特殊字符组成。
- 参数:长度、可选的随机标识符。
- 返回值:生成的随机字符串。
-
使用代码示例
jsimport { uid } from 'radash' uid(7) // => UaOKdlW uid(20, '*') // => dyJdbC*NsEgcnGjTHS
-
源码解析
js// 定义一个泛型函数 `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
数组的方法。这些方法包括获取最小/最大元素、第一个/最后一个元素、下一个/前一个元素以及旋转数组中元素的位置。 - 参数:数组、映射函数。
- 返回值:返回一个包含多个方法的对象。
- 功能说明:用于创建一个对象,该对象提供多种操作传入的
-
使用代码示例
jsimport { 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'
-
源码解析
js// 定义一个函数 `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。
- 返回值:转换后的字符串。
- 功能说明:用于将输入的字符串
-
使用代码示例
jsimport { camel } from 'radash' camel('green fish blue fish') // => greenFishBlueFish
-
源码解析
js// 定义一个函数 `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,则返回空字符串。 - 参数:需要处理的字符串。
- 返回值:处理后的字符串。
- 功能说明:于将输入字符串
-
使用代码示例
jsimport { capitalize } from 'radash' capitalize('green fish blue FISH') // => Green fish blue fish
-
源码解析
js// 定义一个名为 `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)。这个函数首先将字符串中的所有大写字母转换为小写,并在每个大写字母前添加一个短横线,然后根据大写字母、点号、破折号、空格或下划线分割字符串,最后将分割出的字符串数组转换为短横线命名法。 - 参数:需要处理的字符串。
- 返回值:组合后的短横线命名法字符串。
- 功能说明:用于将输入字符串
-
使用代码示例
jsimport { dash } from 'radash' dash('green fish blue fish') // => green-fish-blue-fish
-
源码解析
js// 定义一个名为 `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,则返回空字符串。 - 参数:需要处理的字符串。
- 返回值:处理后的大驼峰命名法的字符串。
- 功能说明:用于将输入字符串
-
使用代码示例
jsimport { pascal } from 'radash' pascal('hello world') // => 'HelloWorld' pascal('va va boom') // => 'VaVaBoom'
-
源码解析
js// 定义一个名为 `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
属性用于指定是否在字母和紧随其后的数字之间添加下划线。 - 参数:需要处理的字符串、配置对象(可选)。
- 返回值:处理后的字符串。
- 功能说明:用于将输入字符串
-
使用代码示例
jsimport { 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
-
源码解析
js// 定义一个名为 `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
用于匹配模板占位符。 - 参数:字符串、要替换占位符的键值对对象。
- 返回值:替换后的字符串。
- 功能说明:用于根据提供的数据对象
-
使用代码示例
jsimport { template } from 'radash' template('It is {{color}}', { color: 'blue' }) // => It is blue template('It is <color>', { color: 'blue' }, /<(.+?)>/g) // => It is blue
-
源码解析
js// 定义一个名为 `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
)。 - 返回值:处理后的字符串。
- 功能说明:用于将输入字符串
-
使用代码示例
jsimport { title } from 'radash' title('hello world') // => 'Hello World' title('va_va_boom') // => 'Va Va Boom' title('root-hook') // => 'Root Hook' title('queryItems') // => 'Query Items'
-
源码解析
js// 定义一个名为 `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
参数指定了要去除的字符,默认为去除空格。 - 参数:需要处理的字符串、需要删除的字符。
- 返回值:处理后的字符串。
- 功能说明:用于从字符串的开头和结尾去除指定的字符。如果输入字符串为空、
-
使用代码示例
jsimport { trim } from 'radash' trim(' hello ') // => hello trim('__hello__', '_') // => hello trim('/repos/:owner/', '/') // => repos/:owner
-
源码解析
js// 定义一个名为 `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
完整方法目录上传,包括思维导图和使用目录。
大家有任何问题或见解,欢迎评论区留言交流和批评指正!!!
你的每一个收藏都是作者写作的动力!!!