npm 包 @types/match-sorter 的使用教程

阅读时长 6 分钟读完

简介

@types/match-sorter 是一个用于字符串排序和过滤的 npm 包。它可以接受一个字符串数组和一个字符串作为输入,返回一个按照匹配程度排序的字符串数组。@types/match-sorter 提供了一些可自定义的选项,比如排序方向、排序规则等等。

安装

你可以通过 npm 来安装该包:npm install @types/match-sorter --save-dev。需要注意的是,@types/match-sorter 仅仅提供了 TypeScript 类型声明文件,而 match-sorter 本身的主体代码需要另外安装。

基本用法

下面是一个简单的使用示例:

这个示例中,我们先定义了一个字符串数组 data,然后将其和一个匹配字符串 'a' 传入 matchSorter,得到一个按照匹配程度排序后的数组 result。根据我们的设定,只有以 'a' 开头的字符串才会被返回。

选项

@types/match-sorter 提供了多个可选的选项,以便你对匹配和排序进行更精确的控制。下面是一份常用的选项列表:

  • keys:一个字符串或字符串数组,指定输入数据集的哪些属性需要被匹配。当输入数据集中的元素是一个对象时,可以使用这个选项来指定其中的某个属性作为匹配字符串的来源。默认为 'label'
  • threshold:一个数字或捆绑对象,用以控制匹配字符串和数据集中每个元素的匹配程度。检查匹配程度的方式可以通过 thresholdBy 选项指定,详见下文。默认为 0.2
  • thresholdBy:一个字符串或字符串数组,指定检查匹配程度的方式。默认为 'everyChar'。可选的值包括:
    • 'everyChar':包含匹配字符串中的每一个字符则认为匹配度为 1,否则为 0
    • 'string':将匹配字符串视为整个字符串,只有当匹配字符串与数据集中的某个元素完全相等时匹配度为 1,否则为 0
    • 'word':将匹配字符串分解为单词,只有当匹配字符串中的所有单词都可以在数据集中某个元素中找到时匹配度为 1,否则为 0
    • (input: string, item: T) => number:自定义匹配度检查函数。
  • minRanking:一个数字,表示只有排名在这个数字以上的元素才会被返回。默认为 0
  • maxRanking:一个数字,表示只有排名在这个数字以下的元素才会被返回。默认为 Infinity
  • keepDiacritics:一个布尔值,指定是否将重音标识符视为不同的字符。默认为 false

自定义排序规则

除了上述选项外,@types/match-sorter 还提供了多个用于自定义排序规则的函数。

rankings

rankings 是一个匹配字符串与数据集中每个元素的匹配程度的比较函数数组。默认情况下,@types/match-sorter 会使用该数组中第一个返回非负值的函数,将元素根据匹配程度进行排序。你可以通过传入一个自定义的 rankings 数组来修改这个行为。示例:

这个示例中,我们通过传入一个自定义的 rankings 数组来让函数首先使用一个“固定值 10”的比较函数,然后再使用一个区分大小写的比较函数。因此,只有以 'c' 开头的字符串中排名在前四位、即 'car''cat''ca''chicken' 这四个字符串会被返回。

comparator

comparator 函数可以用于进一步精确控制排序行为。comparator 函数接受两个元素 ab,返回一个数字,该数字表示 a 应该排在 b 的前面还是后面。你可以通过传入一个自定义的 comparator 函数来修改排序行为。示例:

-- -------------------- ---- -------
------ ------------ ---- ---------------

--------- ------ -
  ----- -------
  ---- -------
-

----- ---- - -
  ------ -------- ---- ----
  ------ ------ ---- ----
  ------ ---------- ---- ----
--
----- ------ - ----------------- ---- -
  ----- ---------
  --------- ---------------------
  ----------- --- ------- -- ------- -- ----- - ------
---
--------------------
-- ---------- ------ ---- ---- ------ -------- ---- ---- ------ ---------- ---- ----

这个示例中,我们首先使用 keys 选项指定了我们只关心数据集中的 'name' 属性。然后使用 rankings 选项指定了只有匹配程度最高的串匹配函数 rankings.substring。最后,我们传入一个自定义的 comparator 函数,它会先比较年龄,然后再使用 rankings.substring 函数进行排名。由于 comparator 函数是首先比较年龄,而 'Bob' 升龄段排在前面,因此最后的输出结果是以 'Bob''Alice''Charlie' 的顺序排列的。

总结

@types/match-sorter 可以让你轻松实现各种字符串排序和过滤的功能,具有很高的灵活性和可定制性。在实际项目中,你可以根据自己的需求,选择恰当的选项和函数来实现最佳的匹配效果。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/types-match-sorter