简介
在前端的开发中，我们经常需要进行字符串分析和处理，而分析和处理字符串的第一步就是对字符串进行分词。js-tokeniser 是一个用于 JavaScript 代码分词的 npm 包，支持各种语言的词法分析，包括 JavaScript、CSS、HTML 等。
本文将为您提供 js-tokeniser 的详细使用教程，帮助您深入了解该工具的功能，以及如何使用它进行 JavaScript 代码的分词。
安装
首先，您需要在项目中安装 js-tokeniser 包。在命令行中输入以下命令即可安装：
npm install js-tokeniser
使用
js-tokeniser 提供了很多常用的分词方法，以及许多自定义的选项。我们将为您介绍其中一些重要的方法和选项。
方法
tokenize
这是 js-tokeniser 中最基本的方法之一。它将传入的字符串进行分词，并返回一个令牌数组。令牌是该字符串的最小单元，可以是标识符、操作符、关键字等。例如，对于以下字符串：
var a = 1 + 2;
返回的令牌数组将包含下列元素：
-- -------------------- ---- ------- - ------ ------- ------ ------- ------ ------- ------ ----- ------ ----------- ------ ----- ------ ------ ------ ----- ------ ----------- ------ ----- ------ ------ ------ ----- ------ ------- ------ ---- -
每个令牌对象包含两个属性：type 表示令牌的类型，value 表示令牌的值。在上面的例子中，type 的取值范围包括 name（标识符）、operator（操作符）、num（数字）和 punc（标点符号）等。
tokenizeScript
该方法与 tokenize 方法很类似，但区别在于它会在代码执行之前对代码进行优化和排版，这可能会影响最终的令牌数组。例如，在以下代码中：
if (true) { console.log('true'); } else { console.log('false'); }如果使用 tokenize 进行分词，我们将得到下列令牌：
-- -------------------- ---- ------- - ------ ---------- ------ ------ ------ ------- ------ ----- ------ ------- ------ -------- ------ ------- ------ ----- ------ ----------- ------ ----- ------ ------- ------ ----------- ------ ------- ------ ----- ------ ------- ------ ------- ------ ------- ------ ----- ------ --------- ------ ---------- ------ ------- ------ ----- ------ ------- ------ ----- ------ ----------- ------ ----- ------ ---------- ------ -------- --- -
而如果使用 tokenizeScript 进行分词，结果将会是这样的：
-- -------------------- ---- ------- - ------ ---------- ------ ------ ------ ------- ------ ----- ------ ------- ------ -------- ------ ------- ------ ----- ------ ------- ------ ----- ------ ------- ------ ----------- ------ ------- ------ ----- ------ ------- ------ ------- ------ ------- ------ ----- ------ --------- ------ ---------- ------ ------- ------ ----- ------ ------- ------ ----- ------ ------- ------ ----- ------ ---------- ------ -------- --- -
可以看到，tokenizeScript 方法在一定程度上影响了令牌数组的结构以及令牌的类型。
tokenizeJsx
jsx 是一种类似 XML 的 JavaScript 语言扩展，由 React 库引入。tokenizeJsx 方法是 js-tokeniser 提供的专门用于分词 jsx 代码的方法。例如，对于以下 jsx 代码：
const ele = <div id="test">Hello, World!</div>;
使用 tokenizeJsx 进行分词，将得到下列令牌数组：
-- -------------------- ---- ------- - ------ ---------- ------ --------- ------ ------- ------ ------- ------ ----------- ------ ----- ------ ------- ------ ----- ------ ------- ------ ------- ------ ------- ------ ------ ------ ----------- ------ ----- ------ --------- ------ ---------- ------ ------- ------ ----- ------ --------- ------ ------- --------- ------ ------- ------ ----- ------ ----------- ------ ----- ------ ------- ------ ------- ------ ------- ------ ----- ------ ------- ------ ---- -
可以看到，jsx 代码中的尖括号和类似 HTML 的属性等都被正确地识别和分词了。
选项
js-tokeniser 还提供了一些选项，可以用于自定义分词的行为。
locale
该选项用于指定代码中使用的语言，可选值有：
- en_us：美式英语；
- en_uk：英式英语；
- pt_br：巴西葡萄牙语。
如果未指定该选项，默认使用美式英语。
comment
该选项用于指定是否要包含代码中的注释。默认情况下，js-tokeniser 会忽略代码中的注释。
raw
该选项用于指定是否要将代码的原始字符串作为令牌的 value 属性。默认情况下，js-tokeniser 不会在令牌中包含原始字符串。
hint
该选项用于指定是否需要提供诊断信息。默认情况下，js-tokeniser 不会输出任何诊断信息。
示例
以下示例代码演示了如何使用 js-tokeniser 进行代码分词：
-- -------------------- ---- -------
----- ----------- - ------------------------
----- ------ - -
----- - - ---
--- - - ---
-------- ------ -- -
------ - - --
-
--
----- ------ - -----------------------------
--------------------该代码将会输出以下令牌数组：
-- -------------------- ---- ------- - ------ ---------- ------ --------- ------ ------- ------ ----- ------ ----------- ------ ----- ------ ------ ------ ------ ------ ------- ------ ----- ------ ---------- ------ ------- ------ ------- ------ ----- ------ ----------- ------ ----- ------ ------ ------ ------ ------ ------- ------ ----- ------ ---------- ------ ------------ ------ ------- ------ ------- ------ ------- ------ ----- ------ ------- ------ ----- ------ ------- ------ ----- ------ ------- ------ ----- ------ ------- ------ ----- ------ ------- ------ ----- ------ ---------- ------ ---------- ------ ------- ------ ----- ------ ----------- ------ ----- ------ ------- ------ ----- ------ ------- ------ ----- ------ ------- ------ ---- -
您可以在自己的项目中使用类似的代码，来对 JavaScript 代码进行分词。此外，您还可以尝试使用 js-tokeniser 的其他方法和选项，来进行更加精细的分词和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b881e8991b448dff7f