lodash已死？radash库方法介绍及源码解析 —— 随机方法 + 字符串篇

雾散声声慢2024-05-31 9:55

前言

大家好，我是阿瓜。一个励志想成为艾弗森的前端瓜 ~

我们已经分享了 radash 库中数组、对象等相关的方法，大家感兴趣的可以前往主页查看阅读；

或许你最近在某个地方听过或者看过 radash 这个词，它是一个typescript编写的方法库，如果你想试试使用它，我们有简单使用示例，直接套用类似情景使用即可，如果你想深入了解一下这个库，想阅读一下它的源码，我们也会带你逐行解析代码；不管是哪种，相信你都能在文章里有所收获；

后续所有方法分享完毕后，我们会整理一份详细目录文章以及思维导图，方便大家查阅使用。

随机方法

draw：取出数组中的随机项

  1. 使用说明

    • 功能说明：从一个数组中随机抽取一个元素。如果数组为空，则返回 null。
    • 参数：数组。
    • 返回值：数组中的随机项。

  2. 使用代码示例

    js 复制代码 
    import { draw } from 'radash'

const fish = ['marlin', 'bass', 'trout']

draw(fish) // => a random fish

  3. 源码解析

    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]
}
    • 方法流程说明：
      1. draw 函数接受一个数组 array 作为参数。
      2. 如果 array 为空（长度为0），函数返回 null。
      3. 如果 array 非空，函数调用 random 函数获取一个随机索引，该索引在数组的有效范围内。
      4. 函数返回数组中该随机索引位置的元素。

random：生成一个随机数

  1. 使用说明

    • 功能说明：生成一个指定范围内的随机整数。包含最大值和最小值。
    • 参数：最大值、最小值
    • 返回值：返回一个范围内的随机整数。

  2. 使用代码示例

    js 复制代码 
    import { random } from 'radash'

random(0, 100) // => a random number between 0 and 100

  3. 源码解析

    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)
}

    • 方法流程说明：

      1. random 函数接受两个数字参数 min 和 max。
      2. 使用 Math.random() 生成一个随机浮点数，它的值在 0（包含）和 1（不包含）之间。
      3. 将这个随机数乘以 (max - min + 1)，扩展其范围到 [min, max]。
      4. 加上 min 以调整范围的起点。
      5. 使用 Math.floor() 对结果进行向下取整，以确保返回值是介于 min 和 max 之间的一个整数。
      6. 返回这个随机整数。

shuffle：随机打乱数组的顺序

  1. 使用说明

    • 功能说明：这个函数用于打乱（洗牌）一个数组中元素的顺序。
    • 参数：需要打乱的数组。
    • 返回值：打乱后的数组。

  2. 使用代码示例

    js 复制代码 
    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)

  3. 源码解析

    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)
}

    • 方法流程说明：

      1. shuffle 函数接受一个数组 array 作为参数。
      2. 使用 map 方法生成一个新的数组，其中每个元素都是一个包含原始元素和一个随机数的对象。
      3. 使用 sort 方法对这个新数组进行排序。排序的依据是每个对象的随机数属性 rand。
      4. 由于随机数是随机生成的，这种排序实际上将数组元素随机化。
      5. 使用另一个 map 方法提取排序后的对象数组中的原始值，并形成一个新的数组。
      6. 返回这个新的、已打乱顺序的数组。

uid：生成一个指定长度的随机标识符

  1. 使用说明

    • 功能说明：用于生成一个指定长度的随机字符串，该字符串由大写字母、小写字母、数字以及可选的特殊字符组成。
    • 参数：长度、可选的随机标识符。
    • 返回值：生成的随机字符串。

  2. 使用代码示例

    js 复制代码 
    import { uid } from 'radash'

uid(7) // => UaOKdlW
uid(20, '*') // => dyJdbC*NsEgcnGjTHS

  3. 源码解析

    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` 函数的第三个参数是初始累加值，这里是一个空字符串。
    ''
  )
}

    • 方法流程说明：

      1. uid 函数接受 length 和可选的 specials 作为参数。
      2. 函数定义了一个包含所有可用字符的字符串 characters。
      3. 函数使用 iterate 方法生成随机字符串。iterate 函数接受三个参数：迭代次数、累加器函数和初始累加值。
      4. 在每次迭代中，累加器函数使用 random 函数获取 characters 中的一个随机索引，并通过 charAt 方法获取对应的字符。
      5. 累加器函数将随机字符添加到累加值 acc 末尾。
      6. iterate 函数返回生成的随机字符串。

series：创建一个有序的序列对象

  1. 使用说明

    • 功能说明：用于创建一个对象，该对象提供多种操作传入的 items 数组的方法。这些方法包括获取最小/最大元素、第一个/最后一个元素、下一个/前一个元素以及旋转数组中元素的位置。
    • 参数：数组、映射函数。
    • 返回值：返回一个包含多个方法的对象。

  2. 使用代码示例

    js 复制代码 
    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'

  3. 源码解析

    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
  };
};

    • 方法流程说明：

      1. series 接受一个数组 items 和一个可选的 toKey 函数作为参数。
      2. 函数使用 reduce 方法构建两个映射：indexesByKey 将每个元素的键映射到其在数组中的索引，itemsByIndex 将每个索引映射到对应的元素。
      3. 函数定义了一系列方法来操作 items 数组，包括 min、max、first、last、next、previous 和 spin。
      4. min 和 max 方法用于比较两个元素的索引并返回索引较小或较大的元素。
      5. first 和 last 方法分别返回数组中的第一个和最后一个元素。
      6. next 和 previous 方法分别返回给定元素的下一个和前一个元素，如果不存在则返回默认值或第一个/最后一个元素。
      7. spin 方法根据给定的数量 num 旋转当前元素的位置，正数表示向后旋转，负数表示向前旋转。
      8. 返回一个包含所有这些方法的对象。

字符串方法

camel：将字符串转为小驼峰格式

  1. 使用说明

    • 功能说明：用于将输入的字符串 str 转换为驼峰命名法（camelCase）。这个函数首先将字符串中的所有大写字母转换为小写，并在每个大写字母前添加一个空格，然后根据大写字母、点号、破折号、空格或下划线分割字符串，最后将分割出的字符串数组转换为驼峰式。
    • 参数：字符串str。
    • 返回值：转换后的字符串。

  2. 使用代码示例

    js 复制代码 
    import { camel } from 'radash'

camel('green fish blue fish') // => greenFishBlueFish

  3. 源码解析

    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)}`
  })
}

    • 方法流程说明：

      1. camel 函数接受一个字符串 str 作为参数。
      2. 使用 replace 方法将连续的大写字母转换为小写，并在每个大写字母前添加一个空格。
      3. 使用 split 方法根据大写字母或特殊字符分割字符串。
      4. 使用 map 方法将每个字符串转换为小写。
      5. 如果处理后的字符串数组 parts 为空，则返回空字符串。
      6. 如果 parts 只有一个元素，则返回该元素。
      7. 如果 parts 有多个元素，使用 reduce 方法组合它们为驼峰命名法的字符串。
      8. 返回组合后的驼峰命名法字符串。

capitalize：将字符串首字母转为大写

  1. 使用说明

    • 功能说明：于将输入字符串 str 的首字母大写，其余字母小写。如果输入字符串为空或长度为0，则返回空字符串。
    • 参数：需要处理的字符串。
    • 返回值：处理后的字符串。

  2. 使用代码示例

    js 复制代码 
    import { capitalize } from 'radash'

capitalize('green fish blue FISH') // => Green fish blue fish

  3. 源码解析

    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)
}

    • 方法流程说明：

      1. capitalize 函数接受一个字符串 str 作为参数。
      2. 检查 str 是否为空或长度为0，如果是，则返回空字符串。
      3. 将整个字符串转换为小写。
      4. 使用 substring 方法获取字符串的第一个字符，并使用 toUpperCase 方法将其转换为大写。
      5. 使用另一个 substring 方法获取字符串的剩余部分（从第二个字符开始）。
      6. 将首字母大写的字符与剩余的小写字符串连接起来。
      7. 返回处理后的字符串。

dash：把字符串转为短横线（-）分隔并且全小写的格式

  1. 使用说明

    • 功能说明：用于将输入字符串 str 转换为短横线命名法（kebab-case）。这个函数首先将字符串中的所有大写字母转换为小写，并在每个大写字母前添加一个短横线，然后根据大写字母、点号、破折号、空格或下划线分割字符串，最后将分割出的字符串数组转换为短横线命名法。
    • 参数：需要处理的字符串。
    • 返回值：组合后的短横线命名法字符串。

  2. 使用代码示例

    js 复制代码 
    import { dash } from 'radash'

dash('green fish blue fish') // => green-fish-blue-fish

  3. 源码解析

    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()}`
  })
}

    • 方法流程说明：

      1. dash 函数接受一个字符串 str 作为参数。
      2. 使用 replace 方法将大写字母前添加短横线并转换为小写。
      3. 使用 split 方法根据特殊字符分割字符串。
      4. 使用 map 方法将每个字符串转换为小写。
      5. 如果处理后的字符串数组 parts 为空，则返回空字符串。
      6. 如果 parts 只有一个元素，则返回该元素。
      7. 如果 parts 有多个元素，使用 reduce 方法组合它们为短横线命名法的字符串。
      8. 返回组合后的短横线命名法字符串。

pascal：将字符串转为大驼峰命名的格式

  1. 使用说明

    • 功能说明：用于将输入字符串 str 转换为帕斯卡命名法（PascalCase），即每个单词的首字母大写，其余字母小写，且单词之间没有分隔符。如果输入字符串为空或长度为0，则返回空字符串。
    • 参数：需要处理的字符串。
    • 返回值：处理后的大驼峰命名法的字符串。

  2. 使用代码示例

    js 复制代码 
    import { pascal } from 'radash'

pascal('hello world') // => 'HelloWorld'
pascal('va va boom') // => 'VaVaBoom'

  3. 源码解析

    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('')
}

    • 方法流程说明：

      1. pascal 函数接受一个字符串 str 作为参数。
      2. 使用 split 方法根据特殊字符分割字符串，并将每个字符串转换为小写。
      3. 如果处理后的字符串数组 parts 为空，则返回空字符串。
      4. 使用 map 方法遍历 parts 数组，将每个字符串的首字母大写。
      5. 使用 join 方法将首字母大写的字符串数组连接成一个单一的字符串。
      6. 返回处理后的帕斯卡命名法字符串。

snake：将字符串转换为下划线格式

  1. 使用说明

    • 功能说明：用于将输入字符串 str 转换为蛇形命名法（snake_case）。这个函数接受一个字符串和一个可选的 options 对象作为参数，options 对象中的 splitOnNumber 属性用于指定是否在字母和紧随其后的数字之间添加下划线。
    • 参数：需要处理的字符串、配置对象（可选）。
    • 返回值：处理后的字符串。

  2. 使用代码示例

    js 复制代码 
    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

  3. 源码解析

    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]!}`)
}

    • 方法流程说明：

      1. snake 函数接受一个字符串 str 和一个可选的配置对象 options 作为参数。
      2. 使用 replace 方法和 split 方法将字符串分割成小写的部分，并存储在 parts 数组中。
      3. 如果 parts 数组为空，则返回空字符串。
      4. 如果 parts 数组只有一个元素，则返回该元素。
      5. 如果 parts 数组有多个元素，使用 reduce 方法组合它们为蛇形命名法的字符串。
      6. 如果 options 对象中的 splitOnNumber 属性为 false，则返回组合后的结果字符串 result。
      7. 如果 options 对象中的 splitOnNumber 属性不是 false 或未指定，使用 replace 方法在字母和数字之间添加下划线。
      8. 返回处理后的蛇形命名法字符串。

template：在字符串中使用模板变量

  1. 使用说明

    • 功能说明：用于根据提供的数据对象 data 替换字符串 str 中的模板占位符。函数接受三个参数：一个字符串 str，一个数据对象 data，以及一个可选的正则表达式 regex 用于匹配模板占位符。
    • 参数：字符串、要替换占位符的键值对对象。
    • 返回值：替换后的字符串。

  2. 使用代码示例

    js 复制代码 
    import { template } from 'radash'

template('It is {{color}}', { color: 'blue' }) // => It is blue
template('It is <color>', { color: 'blue' }, /<(.+?)>/g) // => It is blue

  3. 源码解析

    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`。
}

    • 方法流程说明：

      1. template 函数接受一个字符串 str，一个数据对象 data，以及一个正则表达式 regex 作为参数。
      2. 函数使用 matchAll 方法和正则表达式 regex 来查找 str 中所有的模板占位符。
      3. 函数使用 reduce 方法遍历匹配结果数组。
      4. 对于每个匹配的占位符，函数从 data 对象中获取对应的值并替换占位符。
      5. 返回替换后的字符串。

title：将字符串转换为首字母大写格式

  1. 使用说明

    • 功能说明：用于将输入字符串 str 转换为标题格式（Title Case），其中每个单词的首字母大写，其余字母小写，单词之间用空格分隔。如果输入字符串为空、null 或 undefined，则返回空字符串。
    • 参数：字符串（可能为null、undefined)。
    • 返回值：处理后的字符串。

  2. 使用代码示例

    js 复制代码 
    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'

  3. 源码解析

    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(' ')
}

    • 方法流程说明：

      1. title 函数接受一个可能为空、null 或 undefined 的字符串 str 作为参数。
      2. 如果 str 是空、null 或 undefined，函数返回空字符串。
      3. 使用 split 方法将字符串分割成单词数组。
      4. 使用 map 方法去除单词的前后空白字符。
      5. 使用 filter 方法移除空字符串，确保只处理实际的单词。
      6. 使用另一个 map 方法将每个单词转换为小写，并使用 capitalize 函数将单词的首字母大写。
      7. 使用 join 方法将单词数组连接成一个单一的字符串，单词之间用空格分隔。
      8. 返回处理后的标题格式字符串。。

trim：去除字符串首尾的指定字符

  1. 使用说明

    • 功能说明：用于从字符串的开头和结尾去除指定的字符。如果输入字符串为空、null 或 undefined，则返回空字符串。charsToTrim 参数指定了要去除的字符，默认为去除空格。
    • 参数：需要处理的字符串、需要删除的字符。
    • 返回值：处理后的字符串。

  2. 使用代码示例

    js 复制代码 
    import { trim } from 'radash'

trim('  hello ') // => hello
trim('__hello__', '_') // => hello
trim('/repos/:owner/', '/') // => repos/:owner

  3. 源码解析

    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, '')
}

    • 方法流程说明：

      1. trim 函数接受一个字符串 str 和一个要去除的字符集 charsToTrim 作为参数。
      2. 如果 str 是空、null 或 undefined，函数返回空字符串。
      3. charsToTrim 中的非字母数字字符被转义，以便在正则表达式中作为普通字符处理。
      4. 使用 new RegExp 创建一个正则表达式，它匹配 str 开头和结尾的 charsToTrim 中的字符。
      5. 使用 replace 方法将匹配的字符替换为空字符串，从而去除 str 开头和结尾的 charsToTrim 中的字符。
      6. 返回处理后的字符串。

最后

我相信能看到最后的都是帅气多金又想进步的~~~~人才。

如果你想查看其他 radash 相关方法，前往主页查看

等所有方法更新完毕，作者会整理一份radash完整方法目录上传，包括思维导图和使用目录。

大家有任何问题或见解，欢迎评论区留言交流和批评指正！！！

你的每一个收藏都是作者写作的动力！！！

相关推荐
m0_748235617 分钟前
从零开始学前端之HTML（三）
前端·html
一个处女座的程序猿O(∩_∩)O2 小时前
小型 Vue 项目，该不该用 Pinia 、Vuex呢？
前端·javascript·vue.js
hackeroink5 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者7 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-7 小时前
验证码机制
前端·后端
燃先生._.8 小时前
Day-03 Vue（生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤）
前端·javascript·vue.js
高山我梦口香糖9 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235249 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_7482402510 小时前
前端如何检测用户登录状态是否过期
前端
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程