lodash已死？radash庫方法介紹及原始碼解析 —— 隨機方法 + 字串篇

雾散声声慢發表於2024-05-31

前言

大家好，我是阿瓜。一個勵志想成為艾弗森的前端瓜 ~

我們已經分享了 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]
}

方法流程說明：
1. draw 函式接受一個陣列 array 作為引數。
2. 如果 array 為空（長度為0），函式返回 null。
3. 如果 array 非空，函式呼叫 random 函式獲取一個隨機索引，該索引在陣列的有效範圍內。
4. 函式返回陣列中該隨機索引位置的元素。

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)
}
```
- 方法流程說明：
  1. random 函式接受兩個數字引數 min 和 max。
  2. 使用 Math.random() 生成一個隨機浮點數，它的值在 0（包含）和 1（不包含）之間。
  3. 將這個隨機數乘以 (max - min + 1)，擴充套件其範圍到 [min, max]。
  4. 加上 min 以調整範圍的起點。
  5. 使用 Math.floor() 對結果進行向下取整，以確保返回值是介於 min 和 max 之間的一個整數。
  6. 返回這個隨機整數。

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

方法流程說明：
1. shuffle 函式接受一個陣列 array 作為引數。
2. 使用 map 方法生成一個新的陣列，其中每個元素都是一個包含原始元素和一個隨機數的物件。
3. 使用 sort 方法對這個新陣列進行排序。排序的依據是每個物件的隨機數屬性 rand。
4. 由於隨機數是隨機生成的，這種排序實際上將陣列元素隨機化。
5. 使用另一個 map 方法提取排序後的物件陣列中的原始值，並形成一個新的陣列。
6. 返回這個新的、已打亂順序的陣列。

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` 函式的第三個引數是初始累加值，這裡是一個空字串。
    ''
  )
}

方法流程說明：
1. uid 函式接受 length 和可選的 specials 作為引數。
2. 函式定義了一個包含所有可用字元的字串 characters。
3. 函式使用 iterate 方法生成隨機字串。iterate 函式接受三個引數：迭代次數、累加器函式和初始累加值。
4. 在每次迭代中，累加器函式使用 random 函式獲取 characters 中的一個隨機索引，並透過 charAt 方法獲取對應的字元。
5. 累加器函式將隨機字元新增到累加值 acc 末尾。
6. 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
  };
};

方法流程說明：
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：將字串轉為小駝峰格式

使用說明
- 功能說明：用於將輸入的字串 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)}`
  })
}

方法流程說明：
1. camel 函式接受一個字串 str 作為引數。
2. 使用 replace 方法將連續的大寫字母轉換為小寫，並在每個大寫字母前新增一個空格。
3. 使用 split 方法根據大寫字母或特殊字元分割字串。
4. 使用 map 方法將每個字串轉換為小寫。
5. 如果處理後的字串陣列 parts 為空，則返回空字串。
6. 如果 parts 只有一個元素，則返回該元素。
7. 如果 parts 有多個元素，使用 reduce 方法組合它們為駝峰命名法的字串。
8. 返回組合後的駝峰命名法字串。

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

方法流程說明：
1. capitalize 函式接受一個字串 str 作為引數。
2. 檢查 str 是否為空或長度為0，如果是，則返回空字串。
3. 將整個字串轉換為小寫。
4. 使用 substring 方法獲取字串的第一個字元，並使用 toUpperCase 方法將其轉換為大寫。
5. 使用另一個 substring 方法獲取字串的剩餘部分（從第二個字元開始）。
6. 將首字母大寫的字元與剩餘的小寫字串連線起來。
7. 返回處理後的字串。

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

方法流程說明：
1. dash 函式接受一個字串 str 作為引數。
2. 使用 replace 方法將大寫字母前新增短橫線並轉換為小寫。
3. 使用 split 方法根據特殊字元分割字串。
4. 使用 map 方法將每個字串轉換為小寫。
5. 如果處理後的字串陣列 parts 為空，則返回空字串。
6. 如果 parts 只有一個元素，則返回該元素。
7. 如果 parts 有多個元素，使用 reduce 方法組合它們為短橫線命名法的字串。
8. 返回組合後的短橫線命名法字串。

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

方法流程說明：
1. pascal 函式接受一個字串 str 作為引數。
2. 使用 split 方法根據特殊字元分割字串，並將每個字串轉換為小寫。
3. 如果處理後的字串陣列 parts 為空，則返回空字串。
4. 使用 map 方法遍歷 parts 陣列，將每個字串的首字母大寫。
5. 使用 join 方法將首字母大寫的字串陣列連線成一個單一的字串。
6. 返回處理後的帕斯卡命名法字串。

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

方法流程說明：
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：在字串中使用模板變數

使用說明
- 功能說明：用於根據提供的資料物件 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`。
}

方法流程說明：
1. template 函式接受一個字串 str，一個資料物件 data，以及一個正規表示式 regex 作為引數。
2. 函式使用 matchAll 方法和正規表示式 regex 來查詢 str 中所有的模板佔位符。
3. 函式使用 reduce 方法遍歷匹配結果陣列。
4. 對於每個匹配的佔位符，函式從 data 物件中獲取對應的值並替換佔位符。
5. 返回替換後的字串。

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

方法流程說明：
1. title 函式接受一個可能為空、null 或 undefined 的字串 str 作為引數。
2. 如果 str 是空、null 或 undefined，函式返回空字串。
3. 使用 split 方法將字串分割成單詞陣列。
4. 使用 map 方法去除單詞的前後空白字元。
5. 使用 filter 方法移除空字串，確保只處理實際的單詞。
6. 使用另一個 map 方法將每個單詞轉換為小寫，並使用 capitalize 函式將單詞的首字母大寫。
7. 使用 join 方法將單詞陣列連線成一個單一的字串，單詞之間用空格分隔。
8. 返回處理後的標題格式字串。。

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

方法流程說明：
1. trim 函式接受一個字串 str 和一個要去除的字符集 charsToTrim 作為引數。
2. 如果 str 是空、null 或 undefined，函式返回空字串。
3. charsToTrim 中的非字母數字字元被轉義，以便在正規表示式中作為普通字元處理。
4. 使用 new RegExp 建立一個正規表示式，它匹配 str 開頭和結尾的 charsToTrim 中的字元。
5. 使用 replace 方法將匹配的字元替換為空字串，從而去除 str 開頭和結尾的 charsToTrim 中的字元。
6. 返回處理後的字串。

最後

我相信能看到最後的都是帥氣多金又想進步的~~~~人才。

如果你想檢視其他 radash 相關方法，前往主頁檢視

等所有方法更新完畢，作者會整理一份radash完整方法目錄上傳，包括思維導圖和使用目錄。

大家有任何問題或見解，歡迎評論區留言交流和批評指正！！！

你的每一個收藏都是作者寫作的動力！！！

lodash已死？Radash庫方法介紹及原始碼解析 —— 非同步方法篇
2024-05-14
原始碼非同步
lodash已死？radash庫方法介紹及原始碼解析 —— 判斷方法篇
2024-06-07
原始碼
lodash已死？radash庫方法介紹及原始碼解析 —— 函式柯里化 + Number篇
2024-05-20
原始碼函式
lodash已死？radash最全使用介紹（附原始碼說明）—— Array方法篇（4）
2024-04-24
原始碼
lodash已死？radash最全使用介紹（附原始碼說明）—— Array方法篇（2）
2024-04-03
原始碼
lodash已死？radash最全使用介紹（附原始碼說明）—— Array方法篇（3）
2024-04-12
原始碼
lodash已死？radash最全使用介紹（附原始碼詳細說明）—— Array方法篇（1）
2024-03-30
原始碼
ArrayList相關方法介紹及原始碼分析
2019-05-30
原始碼
ReentrantLock介紹及原始碼解析
2023-02-08
ReentrantLock原始碼
Android IntentService使用全面介紹及原始碼解析
2016-07-22
AndroidIntent原始碼
閱讀lodash原始碼之旅陣列方法篇-compact和concat
2021-01-24
原始碼陣列
Spring原始碼分析——spring原始碼核心方法refresh()介紹
2021-10-09
Spring原始碼
Lombok介紹及使用方法
2018-03-14
Lombok
Lombok介紹，使用方法及原理
2018-01-22
Lombok
Ldd命令介紹及使用方法
2014-02-27
簡單介紹PostgreSQL解析URL的方法
2022-12-10
SQL
LevelDB 原始碼解析之 Random 隨機數
2021-03-30
原始碼random隨機
簡單介紹MySQL列印死鎖日誌的方法
2022-03-14
MySql
簡單介紹Vue之vue.$set()方法原始碼案例
2021-12-09
Vue原始碼
Glide原始碼解析二---into方法
2022-05-12
IDE原始碼
tcpdump抓包及tshark解包方法介紹
2021-02-01
TCP
mybatis原理，配置介紹及原始碼分析
2018-10-31
MyBatis原始碼
TiKV 原始碼解析（五）fail-rs 介紹
2019-04-01
原始碼AI
domutils 工具庫的使用方法介紹
2023-05-18
Mock方法介紹
2017-03-17
Mock
PHP生成隨機密碼的4種方法及效能對比
2015-04-10
PHP隨機密碼
MAC地址隨機化介紹
2020-10-19
Mac隨機
Java字串編碼介紹
2019-01-27
Java字串編碼
直播軟體開發，JS生成隨機字串的方法
2023-05-15
JS隨機字串
oracle正規表示式語法介紹及實現手機號碼匹配方法
2020-08-11
Oracle
集合的toString()方法原始碼解析
2016-02-29
原始碼
前端跨域有哪些種方法及介紹？
2019-03-02
前端跨域
Cookie介紹及JavaScript操作Cookie方法詳解
2015-03-01
CookieJavaScript
修改 requests 庫原始碼的方法
2023-11-21
原始碼
getElementsByClassName()方法用法介紹
2017-03-31
JSON介紹及Android最全面解析方法(Gson、AS自帶org.son、Jackson解析)
2017-07-11
JSONAndroid
RabbitMQ系列隨筆——介紹及安裝
2020-08-29
MQ
三大主流前端框架介紹及選型方法
2023-12-21
前端框架

lodash已死？radash庫方法介紹及原始碼解析 —— 隨機方法 + 字串篇

前言

隨機方法

draw：取出陣列中的隨機項

random：生成一個隨機數

shuffle：隨機打亂陣列的順序

uid：生成一個指定長度的隨機識別符號

series：建立一個有序的序列物件

字串方法

camel：將字串轉為小駝峰格式

capitalize：將字串首字母轉為大寫

dash：把字串轉為短橫線（-）分隔並且全小寫的格式

pascal：將字串轉為大駝峰命名的格式

snake：將字串轉換為下劃線格式

template：在字串中使用模板變數

title：將字串轉換為首字母大寫格式

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

最後

相關文章