在 Web 开发中，URL 是非常重要的一环，它能够让用户清晰地知道当前所处的页面和路径。然而 URL 中常常包含各种诸如特殊字符、大小写等问题，不利于搜索引擎的索引和使用体验的提升。为了解决这个问题，我们可以使用 npm 包 speakingurl 来生成可读性更好的 URL。
安装
在开始使用前，我们需要先安装该 npm 包。在终端中执行以下命令：
npm install speakingurl
使用
基本使用
接下来，我们来看看如何使用 speakingurl。首先，导入该包：
const getSlug = require('speakingurl');然后，调用 getSlug 函数进行转换。例如，将字符串 "你好，世界！" 转换成可用的 URL：
let slug = getSlug("你好，世界！");
console.log(slug); // 输出：ni-hao-shi-jie以上代码将把输入的字符串中的所有中文字符转换成拼音，并去掉其他非字母数字字符，最后返回一个新的字符串作为 URL。
自定义选项
除了默认选项之外，speakingurl 还支持许多自定义选项来满足不同的需求。以下是一些常用的选项：
- separator：指定单词间的分隔符，默认为
-。 - lang：指定输入字符串所用的语言，默认为
en。 - mark：确定是否保留音调符号，默认为
false。 - symbols：指定要保留的字符列表，默认为一组常见的 URL 不支持的字符。
例如，我们可以使用以下代码将中文字符串 “你好，世界！” 转换成以 _ 作为分隔符的 URL：
let options = {
separator: '_'
};
let slug = getSlug("你好，世界！", options);
console.log(slug); // 输出：ni_hao_shi_jie实际应用
speakingurl 可以广泛地应用于各种 Web 开发场景中。以下是一些实际应用示例：
在 Node.js 中创建友好的路由
在 Node.js 中，我们可以使用 speakingurl 来生成易于阅读和理解的路由 URL。例如：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - ----------------------- ----- --- - ---------- --------------------- ----- ---- -- - ----- -- - -------------- ----- ----- - ----------------- ----- ---- - --------------- -------------- ------- ------ ---
当用户访问 /posts/123 时，将会根据 ID 获取文章标题，然后使用 speakingurl 将其转换为友好的路由 URL。
在 React 中创建可分享的 URL
在 React 中，我们可以使用 react-router-dom 库来进行路由管理，并结合 speakingurl 将当前页面的参数转换为可分享的 URL。例如：
-- -------------------- ---- -------
----- - --------- --------- - - ------
----- - -------------- ------ ---- - - ---------------
----- ------- - -----------------------
-------- ----- -
----- ------ -------- - -------------
------------ -- -
----- ----- - --- ----------------------------------------
----- ---- - ------------------
------------ -- ----
-- ----
------ -
-----
---------- ------------
----- ------------------------------------------
------
--
-
----------------
---------------
------ -------- --------------- --
-----------------
-------------------------------
--以上代码将根据当前页面的 name 参数生成可分享的 URL，并在页面中添加一个链接按钮供用户点击分享。
总结
本文介绍了如何使用 npm 包 speakingurl 来生成可读性
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/52722