詳解JavaScript實現簡單的詞法分析器範例

2023-03-11 06:00:46

正文

詞法分析是編譯器的一項重要工作，其目的是將原始碼轉換成單個單詞（token）的序列，方便後續語法分析器（parser）對其進行分析。在本文中，我們將使用 JavaScript 實現一個簡單的詞法分析器，以便更好地理解其原理。

什麼是詞法分析器？

在編譯器中，詞法分析器是將原始碼分割成單個單詞的程式。它將輸入的字元流轉換為單詞流，這些單詞（token）在後續的編譯過程中將被用來構建語法樹（parse tree）。

詞法分析器通常由兩部分組成：一系列正規表示式模式，以及一個狀態機，用於在輸入字元流中匹配模式並生成單詞。詞法分析器也可以在直譯器中使用，用於將原始碼轉換成直譯器所能理解的形式。

實現一個簡單的詞法分析器

下面是一個基於 JavaScript 實現的簡單詞法分析器，它可以將輸入的原始碼轉換成單個單詞的序列：

首先定義一個 JavaScript 物件 tokenTypes，其中包含了各種單詞型別的名稱。每個型別名稱都對應一個字串，用於在詞法分析器中標識不同型別的單詞。具體來說，該物件定義了以下單詞型別：

const tokenTypes = {
  number: "NUMBER",
  string: "STRING",
  keyword: "KEYWORD",
  identifier: "IDENTIFIER",
  operator: "OPERATOR",
  punctuation: "PUNCTUATION",
};

number：表示數位型別的單詞。
string：表示字串型別的單詞。
keyword：表示關鍵字型別的單詞，如 if、else、while 等。
identifier：表示識別符號型別的單詞，即變數名。
operator：表示運運算元型別的單詞，如 +、-、*、/ 等。
punctuation：表示標點符號型別的單詞，如 ()、{}、,、; 等。

接著定義了一個陣列 lexerRules，其中包含了一系列的詞法規則，用於匹配不同型別的單詞。每個詞法規則是一個物件，其中包含兩個屬性：

// 定義詞法規則
const lexerRules = [
  // 匹配數位
  { pattern: /^[0-9]+/, type: tokenTypes.number },
  // 匹配字串
  { pattern: /^"[^"]*"/, type: tokenTypes.string },
  { pattern: /^'[^']*'/, type: tokenTypes.string },
  // 匹配關鍵字
  { pattern: /^(if|else|while|for|function)b/, type: tokenTypes.keyword },
  // 匹配識別符號
  { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*/, type: tokenTypes.identifier },
  // 匹配運運算元
  { pattern: /^[+-*/%&lt;&gt;=!&amp;|^~]/, type: tokenTypes.operator },
  // 匹配標點符號
  { pattern: /^[(),;{}[].]/, type: tokenTypes.punctuation },
  // 匹配註釋
  { pattern: /^//.*|/*[sS]*?*//, type: null },
  // 匹配空白字元
  { pattern: /^s+/, type: null },
];

最後，我們定義了一個函數 lexer(code)，用於將輸入的程式碼字串分解成一個個單獨的詞法單元（token）。程式碼如下：

// 定義詞法分析函數
function lexer(code) {
  let tokens = []; // 用於儲存詞法單元
  let pos = 0; // 當前處理的位置
  while (pos < code.length) {
    let match = null; // 當前匹配到的規則
    // 依次嘗試所有規則，找到第一個匹配成功的規則
    for (let rule of lexerRules) {
      match = code.slice(pos).match(rule.pattern);
      if (match) {
        // 如果規則匹配成功，則生成對應的詞法單元並新增到結果陣列中
        if (rule.type) {
          tokens.push({
            type: rule.type,
            value: match[0],
          });
        }
        break; // 跳出規則匹配迴圈，繼續處理下一個字元
      }
    }
    if (!match) {
      // 如果沒有任何規則匹配當前字元，則丟擲錯誤
      throw new Error(`Invalid character at position ${pos}`);
    }
    pos += match[0].length; // 更新當前處理位置
  }
  return tokens;
}

實現流程如下：

定義 tokenTypes 物件，包含各種單詞型別的名稱。
定義 lexerRules 陣列，包含一系列詞法規則，用於匹配不同型別的單詞。
實現 lexer 函數，用於將輸入的程式碼字串分解成一個個單獨的詞法單元（token）。

在 lexer 函數中，我們遍歷輸入字串中的每個字元，對每個字元嘗試使用一組預定義的規則進行匹配。如果匹配成功，則生成對應型別的詞法單元並新增到結果陣列中，然後繼續遍歷後面的字元。如果沒有任何規則匹配當前字元，則丟擲錯誤。

這樣，我們就實現了一個簡單的詞法分析器。通過詞法分析器，我們可以將輸入的程式碼字串分解成單個單詞（token）的序列，為後續的語法分析器（parser）提供便利。

可以將下面的程式碼複製到Chrome瀏覽器控制檯，看下輸出結果...

const tokenTypes = {
  number: "NUMBER",
  string: "STRING",
  keyword: "KEYWORD",
  identifier: "IDENTIFIER",
  operator: "OPERATOR",
  punctuation: "PUNCTUATION",
};
// 定義詞法規則
const lexerRules = [
  // 匹配數位
  { pattern: /^[0-9]+/, type: tokenTypes.number },
  // 匹配字串
  { pattern: /^"[^"]*"/, type: tokenTypes.string },
  { pattern: /^'[^']*'/, type: tokenTypes.string },
  // 匹配關鍵字
  { pattern: /^(if|else|while|for|function)b/, type: tokenTypes.keyword },
  // 匹配識別符號
  { pattern: /^[a-zA-Z_][a-zA-Z0-9_]*/, type: tokenTypes.identifier },
  // 匹配運運算元
  { pattern: /^[+-*/%<>=!&|^~]/, type: tokenTypes.operator },
  // 匹配標點符號
  { pattern: /^[(),;{}[].]/, type: tokenTypes.punctuation },
  // 匹配註釋
  { pattern: /^//.*|/*[sS]*?*//, type: null },
  // 匹配空白字元
  { pattern: /^s+/, type: null },
];
// 定義詞法分析函數
function lexer(code) {
  let tokens = []; // 用於儲存詞法單元
  let pos = 0; // 當前處理的位置
  while (pos < code.length) {
    let match = null; // 當前匹配到的規則
    // 依次嘗試所有規則，找到第一個匹配成功的規則
    for (let rule of lexerRules) {
      match = code.slice(pos).match(rule.pattern);
      if (match) {
        // 如果規則匹配成功，則生成對應的詞法單元並新增到結果陣列中
        if (rule.type) {
          tokens.push({
            type: rule.type,
            value: match[0],
          });
        }
        break; // 跳出規則匹配迴圈，繼續處理下一個字元
      }
    }
    if (!match) {
      // 如果沒有任何規則匹配當前字元，則丟擲錯誤
      throw new Error(`Invalid character at position ${pos}`);
    }
    pos += match[0].length; // 更新當前處理位置
  }
  return tokens;
}
// 範例輸入
const code = `
  // This is a comment
  let x = 123;
  let y = "hello, world!";
  if (x > 100) {
    console.log(y);
  }
`;
// 執行詞法分析
const tokens = lexer(code);
// 輸出結果
console.log(tokens,'-------效果---------');

總結

這個詞法分析器是基於正規表示式的簡單實現，還有許多可以優化的地方。但是，通過這個例子，我們可以更好地理解詞法分析器的工作原理。

以上就是詳解JavaScript實現簡單的詞法分析器範例的詳細內容，更多關於JavaScript詞法分析器的資料請關注it145.com其它相關文章！

詳解JavaScript實現簡單的詞法分析器範例

目錄

正文

什麼是詞法分析器？

實現一個簡單的詞法分析器

總結

熱門文章