介绍
transliter 是一个能够将文本中的中文字符转化为对应的拼音的 npm 包。它可以供前端开发者在开发中使用，尤其是在需要对中文进行转换的场景中，如搜索中文关键字等。
本篇文章将详细介绍如何在前端项目中使用 transliter 进行中文转拼音转换，并提供示例代码。
安装
将 transliter 安装到项目中最简单的方法是使用 npm，命令如下：
npm install transliter --save
执行以上命令之后，会将 transliter 和它的所有依赖项下载到项目的 node_modules 目录下，并在 package.json 中记录它们。
使用
在项目中使用 transliter 的方法很简单，只需要在代码中引入并调用即可。
const translit = require('transliter');
console.log(translit('你好')); // 输出：ni-hao
console.log(translit('中国')); // 输出：zhong-guo以上代码中，我们使用 require 导入了 transliter 包，然后调用了它的唯一一个方法 translit()。该方法接收一个字符串作为参数，并将该字符串中的中文字符转化为对应的拼音，并用 '-' 连接各个单词。
如果你使用的是 ES6 模块，可以使用以下代码：
import translit from 'transliter';
console.log(translit('你好')); // 输出：ni-hao
console.log(translit('中国')); // 输出：zhong-guo指定分隔符
在默认情况下，transliter 会使用 '-' 来连接单词。但是，你也可以指定分隔符。例如，你可以使用空格作为分隔符：
const translit = require('transliter');
console.log(translit('你好', ' ')); // 输出：ni hao
console.log(translit('中国', ' ')); // 输出：zhong guo以上代码中，在调用方法时，我们传入了一个表示分隔符的字符串作为第二个参数。
页面渲染示例
接下来，我们将演示如何在前端项目中使用 transliter 对中文关键字进行搜索，并在页面上正常显示。
先看 HTML：
-- -------------------- ---- -------
------
------
----- ----------------
----------------- ----------
-------
------
------ ----------- -----------------
--- ------------------
-----------
-----------
-----------
-----------
-----------
-----
------- ------------------------
-------
-------以上 HTML 中，我们提供了一个搜索输入框和一个结果列表，其中结果列表中的内容是中文汉字。
接下来是 index.js 中的代码：
-- -------------------- ---- -------
------ -------- ---- -------------
----- ----------- - ---------------------------------------
----- ------------ - ----------------------------------------
----- ---- - ------ ----- ----- ----- ------
-------- -------- -
----- ----- - -------------------------
-- ------ --- --- -
---------------------- - ---------- -- --------------------------
- ---- -
----- --- - ------------- -- ---------------------------------------
---------------------- - --------- -- --------------------------
-
-
------------------------------------- --------
---------以上代码中，我们首先通过 import 引入了 translit，然后指定了搜索框和结果列表的元素。接着，我们定义了一个 render() 函数来渲染页面内容。该函数首先获取搜索框中的值，如果为空，则展示全部内容；否则，则将输入值和数据做匹配筛选，并展示匹配的结果。
在输入框 input 事件中，我们调用了 render() 函数，以及在页面加载完成后，也调用了一次 render()。
最后，我们在 HTML 文件中引入了该脚本文件。
结论
transliter 是一个非常简单易用的中文转拼音工具包，在处理中文搜索、拼音首字母过滤等场景下都十分实用。希望这篇文章能够帮助你快速了解如何在前端项目中使用这个工具包，并且提供了一个实际应用场景的示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b44c6eb7e50355dbe36