JavaScript实现简单编译器步骤详解

本文深入浅出地讲解了如何使用 JavaScript 实现一个简单的编译器，将自定义的表达式语言转换为 JavaScript 代码。文章详细介绍了编译器的三个核心步骤：**词法分析**（将源代码分解为 tokens）、**语法分析**（将 tokens 构建成抽象语法树 AST）和**代码生成**（遍历 AST 生成目标代码）。通过定义语言语法，例如支持加减乘除和变量赋值，并提供相应的 `tokenize`、`parse` 和 `generate` 函数，读者可以清晰地了解编译器的基本原理和实现流程。此外，文章还提供完整的代码示例，方便读者实践和学习，是理解编译器原理的优秀入门教程。

答案：编译器分词法分析、语法分析和代码生成三步，将表达式语言转为JavaScript。首先 tokenize 函数拆分源码为 number、identifier 等 token；接着 parse 构建 AST，识别 NumberLiteral、Identifier 和 BinaryExpression 节点，递归处理括号与运算符；最后 generate 遍历 AST，生成带括号的 JavaScript 表达式字符串。三步串联实现 compile，如输入 "(x + 5) y - 3" 输出 "((((x + 5)) y) - 3)"，语义正确可执行，展示了编译器核心流程。

实现一个简单的编译器，将某种语言子集转换为 JavaScript，主要分为三个阶段：词法分析、语法分析和代码生成。下面以一个极简表达式语言为例（支持加减乘除和变量），说明如何用 JavaScript 实现。

1. 定义源语言子集

• 数字：如 123、45.6
• 变量名：如 x、count
• 二元运算：+、-、*、/
• 支持括号分组

(x + 5) * y - 3

目标是将其编译成等价的 JavaScript 表达式字符串。

2. 词法分析（Lexer）

每个 token 包含类型（type）和值（value）。

function tokenize(input) {
  const tokens = [];
  let i = 0;

  while (i < input.length) {
    let char = input[i];

    if (char === ' ') {
      i++;
      continue;
    }

    if (/[0-9]/.test(char)) {
      let value = '';
      while (i < input.length && /[0-9\.]/.test(input[i])) {
        value += input[i++];
      }
      tokens.push({ type: 'number', value });
      continue;
    }

    if (/[a-z]/i.test(char)) {
      let value = '';
      while (i < input.length && /[a-z_]/i.test(input[i])) {
        value += input[i++];
      }
      tokens.push({ type: 'identifier', value });
      continue;
    }

    if (char === '+') {
      tokens.push({ type: 'plus', value: '+' });
      i++;
      continue;
    }
    if (char === '-') {
      tokens.push({ type: 'minus', value: '-' });
      i++;
      continue;
    }
    if (char === '*') {
      tokens.push({ type: 'asterisk', value: '*' });
      i++;
      continue;
    }
    if (char === '/') {
      tokens.push({ type: 'slash', value: '/' });
      i++;
      continue;
    }
    if (char === '(') {
      tokens.push({ type: 'paren', value: '(' });
      i++;
      continue;
    }
    if (char === ')') {
      tokens.push({ type: 'paren', value: ')' });
      i++;
      continue;
    }

    throw new Error('未知字符: ' + char);
  }

  return tokens;
}

3. 语法分析（Parser）

我们定义 AST 节点类型：

• NumberLiteral：表示数字
• Identifier：表示变量
• BinaryExpression：表示二元操作（如加法）

function parse(tokens) {
  let current = 0;

  function walk() {
    let token = tokens[current];

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

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

    if (token.type === 'paren' && token.value === '(') {
      current++; // 跳过 '('
      let expr = walk();
      token = tokens[current];
      if (token.type === 'paren' && token.value === ')') {
        current++;
      } else {
        throw new Error('缺少右括号');
      }
      return expr;
    }

    // 处理二元表达式，简单左递归处理
    let left = walk();
    token = tokens[current];

    if (token && ['plus', 'minus', 'asterisk', 'slash'].includes(token.type)) {
      current++;
      let operator = token.value;
      let right = walk();

      return {
        type: 'BinaryExpression',
        operator,
        left,
        right,
      };
    }

    return left;
  }

  const ast = {
    type: 'Program',
    body: walk(),
  };

  return ast;
}

4. 代码生成（Code Generator）

function generate(ast) {
  if (ast.type === 'NumberLiteral') {
    return ast.value;
  }

  if (ast.type === 'Identifier') {
    return ast.name;
  }

  if (ast.type === 'BinaryExpression') {
    return `(${generate(ast.left)} ${ast.operator} ${generate(ast.right)})`;
  }

  if (ast.type === 'Program') {
    return generate(ast.body);
  }

  throw new Error('不支持的节点类型: ' + ast.type);
}

5. 组装编译器

function compile(input) {
  const tokens = tokenize(input);
  const ast = parse(tokens);
  const output = generate(ast);
  return output;
}

测试一下：

console.log(compile("(x + 5) * y - 3"));
// 输出: ((((x + 5)) * y) - 3)

虽然输出多了些括号，但语义正确，可被 JS 正确执行。

基本上就这些。这个例子展示了编译器的核心流程。实际中可以扩展支持函数调用、赋值、控制流等，也可以加入作用域分析、类型检查等优化步骤。关键是理解“分阶段处理”这一思想。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。