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");
}
}