如何用JavaScript实现一个简单的虚拟机或解释器？-js教程-PHP中文网

如何用JavaScript实现一个简单的虚拟机或解释器？

狼影

发布： 2025-10-06 10:31:01

原创

938人浏览过

<p>先实现词法分析、语法分析和AST求值三步，支持加减乘除与括号。通过tokenize将字符串转为词元，parse构建抽象语法树，evaluate递归计算结果，最终interpret函数整合流程，输出如“(3 + 5) * 2”为16。</p>

如何用javascript实现一个简单的虚拟机或解释器？

实现一个简单的虚拟机或解释器，核心是理解“语言如何被解析和执行”。JavaScript 本身很适合用来构建这类工具，因为它有灵活的语法处理能力和函数式特性。下面以实现一个极简的算术表达式解释器为例，带你一步步构建。

1. 定义语言结构（词法与语法）

先明确你要解释的语言能做什么。比如我们支持加减乘除和括号：

示例表达式：(3 + 5) * 2

第一步是将字符串拆成“词元”（token），这个过程叫词法分析（Lexing）。

代码实现一个简单的 lexer：

立即学习“Java免费学习笔记（深入）”；

function tokenize(input) {
  const tokens = [];
  const regex = /\d+|[\+\-\*\/\(\)]/g;
  let match;
<p>while ((match = regex.exec(input)) !== null) {
const value = match[0];
if (/\d+/.test(value)) {
tokens.push({ type: 'number', value: parseInt(value, 10) });
} else {
tokens.push({ type: 'operator', value });
}
}</p><p>return tokens;
}

登录后复制

2. 构建抽象语法树（AST）

把词元转为树形结构，便于递归计算。这个过程叫语法分析（Parsing）。

我们用递归下降解析法处理优先级：括号 > 乘除 > 加减。

function parse(tokens) {
  let current = 0;
<p>function parseExpression() {
return parseAdditive();
}</p><p>function parseAdditive() {
let left = parseMultiplicative();</p><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">while (current < tokens.length) {
  const op = tokens[current];
  if (op.value !== '+' && op.value !== '-') break;

  current++;
  const right = parseMultiplicative();
  left = { type: 'binary', operator: op.value, left, right };
}

return left;

登录后复制

}

Giiso写作机器人

Giiso写作机器人，让写作更简单

查看详情

function parseMultiplicative() { let left = parsePrimary();

while (current < tokens.length) {
  const op = tokens[current];
  if (op.value !== '*' && op.value !== '/') break;

  current++;
  const right = parsePrimary();
  left = { type: 'binary', operator: op.value, left, right };
}

return left;

登录后复制

}

function parsePrimary() { const token = tokens[current];

if (token.type === 'number') {
  current++;
  return { type: 'number', value: token.value };
}

if (token.value === '(') {
  current++;
  const expr = parseExpression();
  if (tokens[current]?.value !== ')') throw new Error('Missing )');
  current++;
  return expr;
}

throw new Error('Unexpected token: ' + token.value);

登录后复制

}

return parseExpression(); }

3. 执行 AST（解释器核心）

遍历语法树，递归求值。这就是解释器的执行阶段。

function evaluate(ast) {
  if (ast.type === 'number') {
    return ast.value;
  }
<p>if (ast.type === 'binary') {
const left = evaluate(ast.left);
const right = evaluate(ast.right);</p><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">switch (ast.operator) {
  case '+': return left + right;
  case '-': return left - right;
  case '*': return left * right;
  case '/': return left / right;
}

登录后复制

}

throw new Error('Unknown AST node type: ' + ast.type); }

4. 组合运行

把三部分串起来，就能执行简单表达式了。

function interpret(code) {
  const tokens = tokenize(code);
  const ast = parse(tokens);
  return evaluate(ast);
}
<p>// 使用示例
console.log(interpret("(3 + 5) * 2")); // 输出 16

登录后复制

这个解释器虽然简单，但体现了核心流程：输入 → 分词 → 构造AST → 遍历执行。你可以在此基础上扩展变量、函数、作用域等特性。

基本上就这些。不复杂，但容易忽略细节，比如括号匹配和运算优先级处理。动手写一遍，理解会更深。

以上就是如何用JavaScript实现一个简单的虚拟机或解释器？的详细内容，更多请关注php中文网其它相关文章！