JavaScript 反引号（` backtick）和双引号的不完全等价 ≠ 场景
|
zhenglin
2026年10月10日 10:10
本文热度 150
|
一、backtick ` 不能用作属性引号
const wechat = {
'my-name': 'JavaScript与编程艺术'
}
const wechat = {
`my-name`: 'JavaScript与编程艺术'
}
将报错：Uncaught SyntaxError: Unexpected template string
可以加[]解决：
const wechat = {
[`my-name`]: 'JavaScript与编程艺术'
}
二、反引号不能紧跟在表达式后
backtick ` 如果紧跟值或表达式后面将报错。
下面引号不可替换成反引号：
let start = 0 // 注意此处无分号
'backtick 和引号不等价的场景'.replace('backtick', '<backtick>')
若写成
let start = 0 // 注意此处无分号
`backtick 和引号不等价的场景`.replace('backtick', '<backtick>')
则报错“Uncaught TypeError: 0 is not a function”
这个错误是因为 JavaScript 的自动分号插入（ASI Automatic Semicolon Insertion）机制和模板字符串（反引号）的特性共同导致的。JavaScript 解析后相当于：
let start = 0`backtick 和引号不等价的场景`.replace('backtick', '<backtick>')
只要模板字符串紧跟在某个表达式后面（没有分号），这个表达式就会被当作 tag 函数来调用模板字符串 template literals，这叫做 tagged template：
// 这些都会被当作函数调用
fn`hello` // ✅ fn 是函数
obj.fn`hello` // ✅ fn 是函数
(() => {})`hello` // ✅ 箭头函数被调用
0`hello` // ❌ 0 不是函数
null`hello` // ❌ null 不是函数
const date = new Date()
`backtick 和引号不等价的场景`.replace('backtick', '<backtick>')
// ❌ VM902:2 Uncaught TypeError: (intermediate value) is not a function
三、静态 import 模块名不能使用反引号包裹
实验代码 back-tick/import.js:
// ❌ SyntaxError: Unexpected template string
import { test } from `node:test`
❯ node back-tick/import.js
file:///F:/temp/back-tick/import.js:1
import { test } from `node:test`
^^^^^^^^^^^
SyntaxError: Unexpected template string
at compileSourceTextModule (node:internal/modules/esm/utils:346:16)
at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:107:18)
at #translate (node:internal/modules/esm/loader:536:12)
at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:583:27)
at async ModuleJob._link (node:internal/modules/esm/module_job:162:19)
Node.js v22.18.0
静态导入模块不能使用反引号包裹。当然动态是可以的：
const { test } = await import(`node:test`)
console.log(test)
能正常输出且输出和 import { test } from 'node:test' 一样。dynamic import 经常用在对启动性能有极致追求的场景，比如 OpenCode 或 Claude Code 等 CLI 中。
阅读原文：点击这里
该文章在 2026/10/10 10:10:46 编辑过
400 186 1886
