摘要：生成语法解析器五个文法，行代码搞定，表示四则运算的文法，可以参考此文。这些相互依赖的文法组成了一个文法链条，完整表达了四则运算的逻辑函数第一个参数接收根文法表达式，第二个参数是词法解析器，我们将上面创建的传入。
syntax-parser 是完全利用 JS 编写的词法解析+语法解析引擎，所以完全支持在浏览器、NodeJS 环境执行。
它可以帮助你快速生成 词法解析器，亦或进一步生成 语法解析器，将字符串解析成语法树，语法解析器还支持下一步智能提示功能，输入光标位置，给出输入推荐。
目前 syntax-parser 功能逐渐稳定，内核性能还在逐步优化中，我们会利用 syntax-parser 引擎的能力，完成一些令人惊喜的小 DEMO，如果与你的业务场景恰好契合，欢迎使用！
这次的 DEMO 是：利用 syntax-parser 快速完成四则运算语法解析器！
1. 生成词法解析器通过下面 20 行配置，生成一个能解析英文、数字、加减乘除、左右括号的词法解析器，so easy！
import { createLexer } from "syntax-parser"
const myLexer = createLexer([
{
type: "whitespace",
regexes: [/^(s+)/],
ignore: true
},
{
type: "word",
regexes: [/^([a-zA-Z0-9]+)/] // 解析数字
},
{
type: "operator",
regexes: [
/^((|))/, // 解析 ( )
/^(+|-|*|/)/ // 解析 + - * /
]
}
]);
我们可以使用 myLexer 将字符串解析为一个个 Token：
myLexer("1 + 2 - 3 * b / (x + y)")
不过这次的目的是生成语法树，所以我们会把 myLexer 作为参数传给语法解析器。
2. 生成语法解析器五个文法，20 行代码搞定，表示四则运算的文法，可以参考 此文。
利用 chain ，可以高效表示每一个文法表达式要匹配的字符串、表示匹配次数，还支持嵌入新的文法函数。这些相互依赖的文法组成了一个文法链条，完整表达了四则运算的逻辑：
import { chain, createParser, many, matchTokenType } from "syntax-parser"
const root = () => chain(term, many(addOp, root))(parseTermAst);
const term = () => chain(factor, many(mulOp, root))(parseTermAst);
const mulOp = () => chain(["*", "/"])(ast => ast[0].value);
const addOp = () => chain(["+", "-"])(ast => ast[0].value);
const factor = () => chain([
chain("(", root, ")")(ast => ast[1]),
chain(matchTokenType("word"))(ast => ast[0].value)
])(ast => ast[0]);
const myParser = createParser(
root, // Root grammar.
myLexer // Created in lexer example.
);
createParser 函数第一个参数接收根文法表达式，第二个参数是词法解析器，我们将上面创建的 myLexer 传入。 parseTermAst 函数多带带提出来，目的是辅助生成语法树，一共 20 行代码：
const parseTermAst = (ast: any) =>
ast[1]
? ast[1].reduce(
(obj: any, next: any) =>
next[0]
? {
operator: next[0],
left: obj || ast[0],
right: next[1]
}
: {
operator: next[1] && next[1].operator,
left: obj || ast[0],
right: next[1] && next[1].right
},
null
)
: ast[0];
这个函数是为了将语法树变得更规整，否则得到的 AST 解析将会是数组，而不是像 left right operator 这么有含义的对象。
PS：本文的 DEMO 没有考虑乘除高优先级问题。3. 运行词法解析器
最后得到的 myParser 就是语法解析器了！直接执行就能拿到语法树结果！
const result = myParser("1 + 2 - (3 - 4 + 5) * 6 / 7");
console.log(result.ast)
我们打印出语法树，运行结果如下：
{
"operator": "/",
"left": {
"operator": "-",
"left": {
"operator": "+",
"left": "1",
"right": "2"
},
"right": {
"operator": "*",
"left": {
"operator": "+",
"left": {
"operator": "-",
"left": "3",
"right": "4"
},
"right": "5"
},
"right": "6"
}
},
"right": "7"
}
4. 错误提示
不仅语法树，我们构造一个错误的输入试试！
const result = myParser("1 + 2 - (3 - 4 + 5) * 6 / ");
console.log(result.error)
这次我们打印错误信息：
{
"suggestions": [
{
"type": "string",
"value": "("
},
{
"type": "special",
"value": "word"
}
],
"token": {
"type": "operator",
"value": "/",
"position": [
24,
25
]
},
"reason": "incomplete"
}
精准的提示了最后一个 / 位置不完整，建议是填写 ( 或者一个单词。这都是根据文法自动生成的建议，提示不多一个，不少一个！
5. 任意位置输入提示最精髓的功能到了，这个语法解析器就是为了做自动提示，所以支持多传一个参数，告诉我当前你光标的位置：
const result = myParser("1 + 1", 5)
console.log(result.nextMatchings)
假设语句写到这里，我们光标位置定位到 5 的位置，也就是最后一个 1 后面，nextMatchings 属性会告诉我们后面的可能情况：
[
{
"type": "string",
"value": "-"
},
{
"type": "string",
"value": "+"
},
{
"type": "string",
"value": "/"
},
{
"type": "string",
"value": "*"
}
]
6. 结合业务，用在文本编辑器
笔者拿 monaco-editor 举例，利用上面的语法树解析，我们可以轻松完成下面的效果：
光标智能补全 错误提示无论是智能补全，还是错误提示都是 100% 精准无误的（根据上面编写的文法表达式）。
相比普通的语法解析器在解析错误时直接抛出错误，syntax-parser 不仅提供语法树，还能根据文法智能提示光标位置的输入推荐，哪怕是输入错误的情况下，是不是解决了大家的痛点呢？如果觉得好用，欢迎给 syntax-parser 提 建议 或者 pr ！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/97674.html
摘要：它是一门解析型的语言，何为解析型语言呢就是在运行时通过解析器将源代码一行行解析成机器码。而像语言，等则是编译型的语言，即通过编译器将所有的源代码一次性编译成二进制指令，生成一个可执行的程序。 ...
摘要：将每一行作为返回，其中是每行中的列名。对于每一行，都会生成一个对象，其中包含和列中的值。它返回一个迭代器，是迭代结果都为的情况。深度解析至此全剧终。 简单实战 大家好，我又来了，在经过之前两篇文章的介绍后相信大家对itertools的一些常见的好用的方法有了一个大致的了解，我自己在学完之后仿照别人的例子进行了真实场景下的模拟练习，今天和大家一起分享，有很多部分还可以优化，希望有更好主意...
摘要：遵循特定规则，利用操作符，终止节点和其他非终止节点，构造新的字符串非终结符是表示字符串的树的内部节点。语法中的生产具有这种形式非终结符终结，非终结符和运算符的表达式语法的非终结点之一被指定为根。 大纲 基于状态的构建 基于自动机的编程 设计模式：Memento提供了将对象恢复到之前状态的功能（撤消）。 设计模式：状态允许对象在其内部状态改变时改变其行为。 表驱动结构* 基于语法的构...
摘要：当然这不是只限于使用或者其他打包工具的方式都能支持使用优点模块化和可重用性没有冲突显性依赖不会污染全局可以配合预处理器使用少开发单独文件写法基本一致 To define is to limit. 定义一样东西，就意味着限制了它。——王尔德 《道林·格雷的画像》 React系列 React系列 --- 简单模拟语法(一)React系列 --- Jsx, 合成事件与Refs(二)Reac...
摘要：来源编程精解中文第三版翻译项目原文译者飞龙协议自豪地采用谷歌翻译部分参考了编程精解第版确定编程语言中的表达式含义的求值器只是另一个程序。若文本不是一个合法程序，解析器应该指出错误。 来源：ApacheCN『JavaScript 编程精解 中文第三版』翻译项目原文：Project: A Programming Language 译者：飞龙 协议：CC BY-NC-SA 4.0 自豪地采用...
阅读 1332·2021-11-15 11:37
阅读 2216·2021-09-23 11:21
阅读 1303·2019-08-30 15:55
阅读 2107·2019-08-30 15:55
阅读 2816·2019-08-30 15:52
阅读 2820·2019-08-30 11:12
阅读 1576·2019-08-29 18:45
阅读 1888·2019-08-29 14:04
