SyntaxError: Unexpected token

當解析器在給定位置未能識別出某個 token 時,就會出現 JavaScript 異常“unexpected token”(意外的 token),因此它無法理解程式結構。這可能是一個簡單的拼寫錯誤。

訊息

SyntaxError: Unexpected token ';' (V8-based)
SyntaxError: Unexpected identifier 'x' (V8-based)
SyntaxError: Unexpected number (V8-based)
SyntaxError: Unexpected string (V8-based)
SyntaxError: Unexpected regular expression (V8-based)
SyntaxError: Unexpected template string (V8-based)

SyntaxError: unexpected token: identifier (Firefox)
SyntaxError: expected expression, got "x" (Firefox)
SyntaxError: expected property name, got "x" (Firefox)
SyntaxError: expected target, got "x" (Firefox)
SyntaxError: expected meta, got "x" (Firefox)
SyntaxError: expected rest argument name, got "x" (Firefox)
SyntaxError: expected closing parenthesis, got "x" (Firefox)

錯誤型別

SyntaxError

哪裡出錯了?

預期會有一個特定的語言結構,但提供了其他內容。這可能是一個簡單的拼寫錯誤。

示例

預期表示式

例如,在鏈式表示式中,不允許使用末尾逗號。

js
for (let i = 0; i < 5,; ++i) {
  console.log(i);
}
// Uncaught SyntaxError: expected expression, got ';'

正確的方法是省略逗號或新增另一個表示式

js
for (let i = 0; i < 5; ++i) {
  console.log(i);
}

括號不足

有時,您會在 if 語句周圍遺漏括號

js
function round(n, upperBound, lowerBound) {
if (n > upperBound) || (n < lowerBound) { // Missing parentheses here!
    throw new Error(`Number ${n} is more than ${upperBound} or less than ${lowerBound}`);
  } else if (n < (upperBound + lowerBound) / 2) {
    return lowerBound;
  } else {
    return upperBound;
  }
} // SyntaxError: expected expression, got '||'

括號乍一看可能正確,但請注意 || 在括號之外。正確的方法是將 || 放在括號內

js
function round(n, upperBound, lowerBound) {
  if ((n > upperBound) || (n < lowerBound)) {
    throw new Error(
      `Number ${n} is more than ${upperBound} or less than ${lowerBound}`,
    );
  } else if (n < (upperBound + lowerBound) / 2) {
    return lowerBound;
  } else {
    return upperBound;
  }
}

上方的結構錯誤混淆了含義

有時,錯誤是由一些不直接在錯誤位置旁邊的結構問題引起的,因此您需要查詢潛在的錯誤。例如,您打算宣告一個物件的方法,但卻將其宣告為屬性

js
const MyComponent = {
  mounted: {
    document.getElementById("app").classList.add("loaded");
  }
}

document 後的 . 是意外的,因為 JavaScript 將 {} 解析為物件字面量而不是函式體,所以它預期有一個 :。透過將 mounted 宣告為函式來解決此問題。

js
const MyComponent = {
  mounted() {
    document.getElementById("app").classList.add("loaded");
  }
}

另見