编译原理实战一：如何用JS实现一个词法分析器？

前端小小min
2,808 阅读7分钟

词法分析的工作是将一个长长的字符串识别出一个个的单词，这一个个单词就是 Token。而且词法分析的工作是一边读取一边识别字符串的，不是把字符串都读到内存再识别

字符串是一连串的字符形成的，怎么把它断开成一个个的 Token 呢？分割的依据是什么呢？ 其实，我们实现词法分析器的过程，就是写出正则表达式，画出有限自动机的图形，然后根据图形直观地写出解析代码的过程。

下图展示了简单的正则表达式规则 image.png

解析 age >= 45

以解析age >= 45 为例，词法分析的过程如下图所示 image.png

我们来描述一下标识符、比较操作符和数字字面量这三种 Token 的词法规则。

  • 标识符：第一个字符必须是字母，后面的字符可以是字母或数字。
  • 比较操作符：> 和 >=（其他比较操作符暂时忽略）。
  • 数字字面量：全部由数字构成（像带小数点的浮点数，暂时不管它。

我们就是依据这样的规则，来构造有限自动机的。这样，词法分析程序在遇到 age、>= 和 45 时，会分别识别成标识符、比较操作符和数字字面量。不过上面的图只是一个简化的示意图，一个严格意义上的有限自动机是下面这种画法： image.png

解释一下上图的 5 种状态。

  1. 初始状态：刚开始启动词法分析的时候，程序所处的状态。
  2. 标识符状态：在初始状态时，当第一个字符是字母的时候，迁移到状态 2。当后续字符是字母和数字时，保留在状态 2。如果不是，就离开状态 2，写下该 Token，回到初始状态。
  3. 大于操作符（GT）：在初始状态时，当第一个字符是 > 时，进入这个状态。它是比较操作符的一种情况。
  4. 大于等于操作符（GE）：如果状态 3 的下一个字符是 =，就进入状态 4，变成 >=。它也是比较操作符的一种情况。
  5. 数字字面量：在初始状态时，下一个字符是数字，进入这个状态。如果后续仍是数字，就保持在状态 5。

这里我想补充一下，你能看到上图中的圆圈有单线的也有双线的。双线的意思是这个状态已经是一个合法的 Token 了，单线的意思是这个状态还是临时状态。

按照这 5 种状态迁移过程，你很容易编成程序。我们先从状态 1 开始，在遇到不同的字符时，分别进入 2、3、5 三个状态：

 if (this.isAlpha(ch)) {
    //第一个字符是字母
    if (ch === "i") {
        newState = DfaState.Id_let1;
    } else {
        //进入Id状态
        newState = DfaState.Id;
    }
    this.token.type = TokenType.Identifier;
} else if (this.isDigit(ch)) {
    //第一个字符是数字
    newState = DfaState.LetLiteral;
    this.token.type = TokenType.LetLiteral;
}

上面的代码中，nextState 是接下来要进入的状态。用枚举（enum）类型定义了一些枚举值来代表不同的状态，让代码更容易读。

其中 Token 是自定义的一个数据结构，它有两个主要的属性：一个是“type”，就是 Token 的类型，它用的也是一个枚举类型的值；一个是“text”，也就是这个 Token 的文本值。

我们接着处理进入 2、3、5 三个状态之后的状态迁移过程：

case DfaState.Initial:
    state = this.initToken(ch);
    break;
case DfaState.Id:
    if (this.isAlpha(ch) || this.isDigit(ch)) {
        this.appendTokenText(ch);
    } else {
        state = this.initToken(ch);
    }
    break;
case DfaState.GT:
    if (ch === '=') {
        this.token.type = TokenType.GE;
        state = DfaState.GE;
        this.appendTokenText(ch)
    } else {
        state = this.initToken(ch)
    }
    break;
case DfaState.GE:
case DfaState.Assignment:
case DfaState.Plus:
case DfaState.Minus:
case DfaState.Star:
case DfaState.Slash:
case DfaState.SemiColon:
case DfaState.LeftParen:
case DfaState.RightParen:
    state = this.initToken(ch);          //退出当前状态，并保存Token
    break;
case DfaState.LetLiteral:
    if (this.isDigit(ch)) {
        this.appendTokenText(ch)
    } else {
        state = this.initToken(ch)
    }
    break;

运行这个示例程序，你就会成功地解析类似“age >= 45”这样的程序语句。

解析 int age = 40

如果把这个语句涉及的词法规则用正则表达式写出来，是下面这个样子：

Int:        'int'
Id :        [a-zA-Z_] ([a-zA-Z_] | [0-9])*
Assignment : '='

int 这个关键字，与标识符很相似，都是以字母开头，后面跟着其他字母。

换句话说，int 这个字符串，既符合标识符的规则，又符合 int 这个关键字的规则，这两个规则发生了重叠。这样就起冲突了，我们扫描字符串的时候，到底该用哪个规则呢？

当然，我们心里知道，int 这个关键字的规则，比标识符的规则优先级高。普通的标识符是不允许跟这些关键字重名的。

在这里，我们来回顾一下：什么是关键字？

关键字是语言设计中作为语法要素的词汇，例如表示数据类型的 int、char，表示程序结构的 while、if，表述特殊数据取值的 null、NAN 等。

除了关键字，还有一些词汇叫保留字。保留字在当前的语言设计中还没用到，但是保留下来，因为将来会用到。我们命名自己的变量、类名称，不可以用到跟关键字和保留字相同的字符串。那么我们在词法分析器中，如何把关键字和保留字跟标识符区分开呢？

以“int age = 40”为例，我们把有限自动机修改成下面的样子，借此解决关键字和标识符的冲突。 image.png

这个思路其实很简单。在识别普通的标识符之前，你先看看它是关键字还是保留字就可以了。具体做法是：

当第一个字符是 i 的时候，我们让它进入一个特殊的状态。接下来，如果它遇到 n 和 t，就进入状态 4。但这还没有结束，如果后续的字符还有其他的字母和数字，它又变成了普通的标识符。比如，我们可以声明一个 intA（int 和 A 是连着的）这样的变量，而不会跟 int 关键字冲突。完整的代码见最下方。

上面的两个例子虽然简单，但其实已经讲清楚了词法原理，就是依据构造好的有限自动机，在不同的状态中迁移，从而解析出 Token 来只要再扩展这个有限自动机，增加里面的状态和迁移路线，就可以逐步实现一个完整的词法分析器了。

本篇主要参考极客时间中课程使用JS实现的词法分析器，运行示例程序如下代码

let string = "int age = 45;";
console.log(string);
const lexer = new SimpleLexer();
let tokenReader = lexer.tokenize(string);
dump(tokenReader);

string = "inta age = 45;";
console.log(string);
tokenReader = lexer.tokenize(string);
dump(tokenReader);

string = "age >= 45;";
console.log(string);
tokenReader = lexer.tokenize(string);
dump(tokenReader);

运行结果如下图所示 词法分析

完整代码实现

源码地址：SimpleLexer

// 定义各种状态机
const DfaState = {
    Initial: Symbol("Initial"),
    If: Symbol("If"),
    Id_if1: Symbol("Id_if1"),
    Id_if2: Symbol("Id_if2"),
    Else: Symbol("Else"),
    Id_else1: Symbol("Id_else1"),
    Id_else2: Symbol("Id_else2"),
    Id_else3: Symbol("Id_else3"),
    Id_else4: Symbol("Id_else4"),
    Int: Symbol("Int"),
    Id_int1: Symbol("Id_int1"),
    Id_int2: Symbol("Id_int2"),
    Id_int3: Symbol("Id_int3"),
    Id: Symbol("Id"),
    GT: Symbol("GT"),
    GE: Symbol("GE"),
    Assignment: Symbol("Assignment"),
    Plus: Symbol("Plus"),
    Minus: Symbol("Minus"),
    Star: Symbol("Star"),
    Slash: Symbol("Slash"),
    SemiColon: Symbol("SemiColon"),
    LeftParen: Symbol("LeftParen"),
    RightParen: Symbol("RightParen"),
    IntLiteral: Symbol("IntLiteral"),
};
// 定义token类型
export const TokenType = {
    Identifier: Symbol("Identifier"),
    IntLiteral: Symbol("IntLiteral"),
    GT: Symbol("GT"),
    Plus: Symbol("Plus"),
    Minus: Symbol("Minus"),
    Star: Symbol("Star"),
    Slash: Symbol("Slash"),
    SemiColon: Symbol("SemiColon"),
    LeftParen: Symbol("LeftParen"),
    RightParen: Symbol("RightParen"),
    Assignment: Symbol("Assignment"),
    Int: Symbol("Int"),
};
// 单个token对象
class SimpleToken {
    constructor() {
        this.type = null;
        this.text = null;
    }

    getType() {
        return this.type;
    }

    getText() {
        return this.text;
    }
}

class TokenReader {
    constructor(tokens) {
        this.tokens = tokens;
        this.pos = 0;
    }

    read() {
        if (this.pos < this.tokens.length) {
            return this.tokens[this.pos++];
        }
        return null;
    }

    peek() {
        if (this.pos < this.tokens.length) {
            return this.tokens[this.pos]
        }
        return null;
    }

    unread() {
        if (this.pos > 0) {
            this.pos--;
        }
    }

    getPosition() {
        return this.pos;
    }

    setPosition(position) {
        if (position >= 0 && position < this.token.length) {
            this.pos = position;
        }
    }

}

export function dump(tokenReader){
    let token = null;
    while((token = tokenReader.read())){
        console.log(token.type ,token.getText())
    }
}


export class SimpleLexer {
    constructor() {
        this.tokenText = null;
        this.tokens = [];
        this.token = null;
    }

    appendTokenText(ch) {
        this.tokenText = this.tokenText + ch;
    }
    // 是否是字母
    isAlpha(ch) {
        return (ch >= "a" && ch <= "z") || (ch >= "A" && ch <= "Z");
    }
    // 是否是数字
    isDigit(ch) {
        return ch >= "0" && ch <= "9";
    }
    // 是否是空白符
    isBlank(ch) {
        return ch === " " || ch === "\t" || ch === "\n";
    }
    /**
     * 有限状态机进入初始状态。
     * 这个初始状态其实并不做停留，它马上进入其他状态。
     * 开始解析的时候，进入初始状态；某个Token解析完毕，也进入初始状态，在这里把Token记下来，然后建立一个新的Token。
     * @param ch
     * @return
     */
    initToken(ch) {
        if (this.tokenText.length > 0) {
            this.token.text = this.tokenText;
            if(this.token.type){
                this.tokens.push(this.token);
            }
            this.tokenText = "";
            this.token = new SimpleToken();
        }

        let newState = DfaState.Initial;
        if (this.isAlpha(ch)) {
            //第一个字符是字母
            if (ch === "i") {
                newState = DfaState.Id_int1;
            } else {
                //进入Id状态
                newState = DfaState.Id;
            }
            this.token.type = TokenType.Identifier;
        } else if (this.isDigit(ch)) {
            //第一个字符是数字
            newState = DfaState.IntLiteral;
            this.token.type = TokenType.IntLiteral;
        } else if (ch === ">") {
            //第一个字符是>
            newState = DfaState.GT;
            this.token.type = TokenType.GT;
        } else if (ch === "+") {
            newState = DfaState.Plus;
            this.token.type = TokenType.Plus;
        } else if (ch === "-") {
            newState = DfaState.Minus;
            this.token.type = TokenType.Minus;
        } else if (ch === "*") {
            newState = DfaState.Star;
            this.token.type = TokenType.Star;
        } else if (ch === "/") {
            newState = DfaState.Slash;
            this.token.type = TokenType.Slash;
        } else if (ch === ";") {
            newState = DfaState.SemiColon;
            this.token.type = TokenType.SemiColon;
        } else if (ch === "(") {
            newState = DfaState.LeftParen;
            this.token.type = TokenType.LeftParen;
        } else if (ch === ")") {
            newState = DfaState.RightParen;
            this.token.type = TokenType.RightParen;
        } else if (ch === "=") {
            newState = DfaState.Assignment;
            this.token.type = TokenType.Assignment;
        }
        this.appendTokenText(ch);
        return newState;
    }

    getTokens(code) {
        return code.replace(/(.)(?=[^$])/g, "$1,").split(",")
    }

    tokenize(code) {
        this.tokens = [];
        const reader = new TokenReader(this.getTokens(code))
        this.tokenText = "";
        this.token = new SimpleToken();
        let chI = 0;
        let ch = 0;
        let state = DfaState.Initial;
        try {
            while ((chI = reader.read())) {
                ch = chI;
                // console.log(ch);
                switch (state) {
                    case DfaState.Initial:
                        state = this.initToken(ch);
                        break;
                    case DfaState.Id:
                        if (this.isAlpha(ch) || this.isDigit(ch)) {
                            this.appendTokenText(ch);
                        } else {
                            state = this.initToken(ch);
                        }
                        break;
                    case DfaState.GT:
                        if (ch === '=') {
                            this.token.type = TokenType.GE;
                            state = DfaState.GE;
                            this.appendTokenText(ch)
                        } else {
                            state = this.initToken(ch)
                        }
                        break;
                    case DfaState.GE:
                    case DfaState.Assignment:
                    case DfaState.Plus:
                    case DfaState.Minus:
                    case DfaState.Star:
                    case DfaState.Slash:
                    case DfaState.SemiColon:
                    case DfaState.LeftParen:
                    case DfaState.RightParen:
                        state = this.initToken(ch);          //退出当前状态，并保存Token
                        break;
                    case DfaState.IntLiteral:
                        if (this.isDigit(ch)) {
                            this.appendTokenText(ch)
                        } else {
                            state = this.initToken(ch)
                        }
                        break;
                    case DfaState.Id_int1:
                        if (ch === 'n') {
                            state = DfaState.Id_int2;
                            this.appendTokenText(ch)
                        } else if (this.isDigit(ch) || this.isAlpha(ch)) {
                            state = DfaState.Id;    //切换回Id状态
                            this.appendTokenText(ch);
                        } else {
                            state = this.initToken(ch)
                        }
                        break;
                    case DfaState.Id_int2:
                        if (ch === 't') {
                            state = DfaState.Id_int3;
                            this.appendTokenText(ch)
                        } else if (this.isDigit(ch) || this.isAlpha(ch)) {
                            state = DfaState.Id;    //切换回Id状态
                            this.appendTokenText(ch);
                        } else {
                            state = this.initToken(ch)
                        }
                        break;
                    case DfaState.Id_int3:
                        if (this.isBlank(ch)) {
                            this.token.type = TokenType.Int;
                            state = this.initToken(ch)
                        } else {
                            state = DfaState.Id;
                            this.appendTokenText(ch)
                        }
                        break;
                    default:
                        break;
                }
            }
            // 把最后一个token送进去
            if (this.tokenText.length > 0) {
                this.initToken(ch)
            }

        } catch (error) {
            console.log(error)
        }

        return new  TokenReader(this.tokens)
    }
}
// const simpleLexer = new SimpleLexer();
avatar
文章
阅读
粉丝