JavaScript 反引号(` backtick)和双引号的不完全等价 ≠ 场景

0 阅读2分钟

一、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”

Snipaste_2026-08-21_09-24-01.jpg

这个错误是因为 JavaScript 的自动分号插入(ASI Automatic Semicolon Insertion)机制和模板字符串(反引号)的特性共同导致的。JavaScript 解析后相当于:

let start = 0`backtick 和引号不等价的场景`.replace('backtick', '<backtick>')

报错原因是 template string 无需括号即可被当做函数参数调用。

只要模板字符串紧跟在某个表达式后面(没有分号),这个表达式就会被当作 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 中。