前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
首页程序员面试题库String 转义序列 Unicode \n
JavaScript值与类型

字符串里怎么用转义写 Unicode 字符?反斜杠本身又该怎么写?

反斜杠本身要写成 \\。Unicode 字符有两种写法:\u 后面跟正好 4 位十六进制,只能表示 U+FFFF 以内的字符;ES2015 起的 \u{...} 直接写码点,表情符号这类超出范围的字符用它最方便。

前端进阶之旅 · 一题精讲更新于 2026.09.29
JavaScript#值与类型
先看核心答案读代码示例
理解线索

三种写字符的转义方式

  1. \x41两位十六进制,只能表示 U+00FF 以内的字符
  2. \u4E2D正好四位十六进制,覆盖基本多文种平面,常用汉字都在这里
  3. \u{1F600}花括号里写码点,一到六位都行,最大到 10FFFF

转义只发生在源码解析阶段。从接口、输入框拿到的字符串里如果真的有反斜杠加字母,它就是两个普通字符,不会自动变成换行。

核心回答

先记住这个答案

字符串里的反斜杠是转义符,它和后面的字符合起来表示一个特殊字符,比如 \n 是换行,\' 是单引号。反斜杠本身要写成 \\。嵌入 Unicode 字符有两种写法:\u 加正好 4 位十六进制,比如 \u4E2D 是「中」;超出 U+FFFF 的字符(大部分表情符号)用 ES2015 新增的 \u{1F600},花括号里直接写码点。

  • 反斜杠本身写 \\,源码两个字符,实际只算一个
  • \u 后必须正好 4 位十六进制
  • 超出 BMP 的码点可用 \u{...}
  • String.raw 可以让反斜杠原样保留

常用转义一次看全

平时最常用的是换行 \n、制表 \t、回车 \r、引号和反斜杠。它们在源码里占两个字符,进到字符串里只算一个。

写法和真实长度对照JavaScript
const a = 'line1\nline2'
console.log(a.length)                         // \n 只算 1 个字符
console.log('C:\\temp'.length, 'C:\\temp')    // 两个反斜杠才是一个
console.log('\u4E2D\u6587')                   // 4 位十六进制,BMP 内字符
console.log('\u{1F600}'.length)               // 码点写法,表情占 2 个码元
console.log('\uD83D\uDE00' === '\u{1F600}')   // 代理对写法等价
console.log('\x41', '\'', "\"")               // \x 是两位十六进制
console.log(String.raw`C:\new\table`)         // raw 不处理转义
查看输出与解释
11
7 C:\temp
中文
2
true
A ' "
C:\new\table

'C:\\temp' 在源码里有 8 个字符,但实际字符串是 C:\temp,长度 7。如果只写一个反斜杠,'C:\temp' 里的 \t 会被当成制表符,路径就错了。

四位 \u 为什么不够用

JavaScript 字符串内部按 UTF-16 存储,每个存储单元叫一个码元,是 16 位。\u 后面的 4 位十六进制正好对应一个码元,最大 FFFF。常用汉字、拉丁字母都在这个范围里。

表情符号 😀 的码点是 U+1F600,超出了一个码元的容量,要用两个码元组成的「代理对」来存,也就是 \uD83D\uDE00。以前只能这样手算代理对,很不方便。ES2015 加了 \u{...} 写法,花括号里直接写码点,引擎自己拆成代理对。

位数写错会直接报错
\u 后面不足 4 位,比如 '\u4E',在普通字符串里是语法错误,整段脚本都跑不起来。同样,\u{110000} 超过了 Unicode 的最大码点,也是语法错误。而 '\u4E2D1' 不会报错,它是「中」后面跟一个字符 1,因为 \u 只吃 4 位。

路径和正则里的双重转义

new RegExp('\\d+') 为什么要写两个反斜杠?因为这里经过了两层解析:字符串字面量先把 \\ 变成一个 \,得到 \d+,正则再把 \d 解释成数字。只写 '\d+' 的话,字符串阶段 \d 不是合法转义,反斜杠被丢掉,正则收到的就是 d+。

路径、正则、LaTeX 这类反斜杠很多的内容,可以用 String.raw 标签模板,里面的反斜杠原样保留,不用一个个翻倍。

回答前,多想一步

容易答错的地方

以为 \u 能写任意长度
\u 固定吃后面 4 位,写 \u1F600 会得到 \u1F60 对应的字符再跟一个 0,不是笑脸。要写码点必须加花括号。
以为接口返回的 \n 会自动换行
转义只在源码解析时生效。如果后端返回的 JSON 字符串被多转义了一层,前端拿到的是反斜杠和字母 n 两个字符,页面不会换行。这时要排查数据是否被重复转义,而不是在前端再套一层 replace。
把 \0 后面接数字
\0 表示空字符,但 \01 这类后面接数字的是旧的八进制转义,严格模式和模板字符串里都是语法错误。需要空字符后跟数字时写成 \x00。
试着用自己的话回答

面试官还会怎么问?

模板字符串里的转义规则一样吗?

基本一样,\n、\u{...} 都能用,另外反引号本身要在前面加反斜杠转义,想原样输出 ${ 也要在美元符号前加反斜杠。区别是模板字符串直接写的换行会被保留,不需要 \n。

怎么拿到一个字符的码点,或者用码点生成字符?

用 codePointAt(0) 拿码点,String.fromCodePoint(0x1F600) 生成字符。老的 charCodeAt 和 fromCharCode 只处理单个码元,遇到表情会拿到代理对里的一半。

JSON 里的转义和 JS 字符串一样吗?

JSON 更严格:只能用双引号,只支持 \uXXXX 四位写法,不支持 \u{...}、\x 和单引号转义。JSON.parse 遇到这些会抛 SyntaxError。

从一道题,走向一组知识

把知识连起来

值与类型

字符串是原始类型,为什么还能用下标取字符?能用下标改吗?

\u{1F600} 写出来的表情占两个码元,用下标取到的是半个字符。

值与类型

为什么一个表情符号的 length 是 2,家庭表情甚至是 8?

转义写法里的代理对,正是表情符号 length 为 2 的原因。

参考资料

  • JavaScript:值与类型参考资料

示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。

本题目录
  1. 先记住这个答案
  2. 常用转义一次看全
  3. 四位 \u 为什么不够用
  4. 路径和正则里的双重转义
  5. 容易答错的地方
  6. 面试官还会怎么问
  7. 把知识连起来
读懂,再试着讲出来

先看核心答案,再读代码。最后展开追问,检查自己有没有遗漏边界。

试着回答追问
浏览全部面试题理解原理,也关注真实的使用场景。回到顶部 ↑