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

一、backtick ````` 不能用作属性引号

js 复制代码
const wechat = {
  'my-name': 'JavaScript与编程艺术'
}
js 复制代码
const wechat = {
  `my-name`: 'JavaScript与编程艺术'
}

将报错:Uncaught SyntaxError: Unexpected template string

可以加[]解决:

js 复制代码
const wechat = {
  [`my-name`]: 'JavaScript与编程艺术'
}

二、反引号不能紧跟在表达式后

backtick ````` 如果紧跟值或表达式后面将报错。

下面引号不可替换成反引号:

js 复制代码
let start = 0 // 注意此处无分号
'backtick 和引号不等价的场景'.replace('backtick', '<backtick>')

若写成

js 复制代码
let start = 0 // 注意此处无分号
`backtick 和引号不等价的场景`.replace('backtick', '<backtick>')

则报错"Uncaught TypeError: 0 is not a function"

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

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

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

只要模板字符串紧跟在某个表达式后面(没有分号),这个表达式就会被当作 tag 函数来调用模板字符串 template literals,这叫做 tagged template:

js 复制代码
// 这些都会被当作函数调用
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:

js 复制代码
// ❌ SyntaxError: Unexpected template string
import { test } from `node:test`
ts 复制代码
❯ 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

静态导入模块不能使用反引号包裹。当然动态是可以的:

js 复制代码
const { test } = await import(`node:test`)
console.log(test)

能正常输出且输出和 import { test } from 'node:test' 一样。dynamic import 经常用在对启动性能有极致追求的场景,比如 OpenCode 或 Claude Code 等 CLI 中。

相关推荐
兰亭妙微UI设计公司2 小时前
兰亭妙微ui设计公司分享:B端组件命名如何支持团队协作
前端·javascript·vue.js
小大宇3 小时前
Vue知识点-ElementPlus-03提示框+询问+通知
前端·javascript·vue.js
前端技术官4 小时前
前端的技术判断力是怎么练出来的?
javascript·web前端·localstorage·debounce·弱网处理
程序员大阳5 小时前
副队长JavaScript教程(60)-BOM 初识:window 对象与浏览器模型
javascript·bom·window对象·浏览器模型
web打印社区5 小时前
Chrome-kiosk-printing能上生产吗
开发语言·前端·javascript·chrome·websocket
志尊宝6 小时前
AI原生前端开发(041):AI辅助的状态管理(Zustand/Pinia)
前端·javascript·ai-native
Geoffwo6 小时前
DSH-SKILL基础
javascript
AI副业搞钱研究所6 小时前
用 12 组正则写一个骗局话术检测器:权重打分、硬红旗保底和高亮区间合并
javascript
程序员大阳6 小时前
副队长JavaScript教程(48)-异常处理基础
javascript·异常处理·finally·catch·try
志尊宝6 小时前
AI原生前端开发(038):AI辅助的Next.js 15全栈开发
javascript·人工智能·ai-native