必须转义的只有&、、"、'这五个字符，因其在html解析中具有语法意义；中文、emoji、货币符号等unicode字符在utf-8页面中可直接写，非utf-8环境则需用数字编码。
国际化输出时哪些字符必须转义
只有 &、、<code>>、"、' 这五个字符在 HTML 解析中具有语法意义，无论语言环境如何，都必须转义。中文、日文、emoji（如 ?）、货币符号（如 €、¥）在 UTF-8 页面里可直接写，不强制转义；但若输出目标可能是非 UTF-8 环境（比如旧邮件模板、某些嵌入式设备页面），就得统一用数字编码，例如 ? 而不是 ?。
常见错误现象：多语言站点上用户昵称含 & 或 ，后端用 <code>htmlentities() 全量转义，前端又调用 JS 转义函数 → 显示成 < 而不是 。
- 判断依据看响应头：
Content-Type: text/html; charset=utf-8存在且稳定时，中文/emoji 直接写更安全、可读性高 - 服务端模板（如 Java 的
StringEscapeUtils.escapeHtml4()）默认输出数字编码，前端 JS 不应再处理 - PHP 里优先用
htmlspecialchars($str, ENT_QUOTES, 'UTF-8')，别用htmlentities()处理纯 UI 文本，后者会把中文也转成你，增加体积且无必要
服务端与客户端混合渲染的转义次数陷阱
转义只应在最终输出到 HTML 上下文前做一次。国际化的典型链路是：数据库存原始字符串 → 后端模板引擎渲染 → 前端 JS 动态插入。一旦某环已转义，后续环节就不能再碰。
常见错误现象：后端返回 JSON 字段 {"title": "<h1>Hello</h1>"}，前端用 innerHTML 插入前还调用 escapeHtml() → 变成 <h1>Hello</h1>，页面显示源码而非标题。
- React/Vue 框架里，服务端已转义的内容，前端必须用
dangerouslySetInnerHTML或v-html，而不是双大括号插值，否则会被二次转义 - JS 中手动拼接 HTML 时，永远先确认数据来源：如果来自 API 且响应头标明
Content-Type: application/json，那字段值大概率已是原始字符串，需前端转义；如果响应头是text/html，则大概率已转义完毕 - Node.js 的
express+ejs组合中，自动转义，不转义——混用时极易漏掉或重复
属性值里单双引号怎么安全处理
国际化文案常含带引号的本地化字符串，比如法语 L'élément "clé"。这类内容若直接塞进 title="..." 或 data-value="..."，不处理就会提前截断。
常见错误现象：<div title="L'élément " cl></div> → 浏览器只认到第一个 "，后面变成裸文本，甚至触发 XSS（如 title="x" onclick="alert(1)"）。
- 统一用双引号包裹属性，内部单引号无需转义（
title="L'élément "clé""） - 若文案本身含双引号，优先用
"替代，比'兼容性更好（IE8+ 都支持，'在旧 IE 里可能不识别） - 动态生成属性时，不要拼字符串，改用 DOM API：
el.setAttribute('title', str)—— 浏览器内部自动处理引号边界，比手写 HTML 安全得多
浏览器原生转义方案能不能偷懒用
有人用 document.createElement('div').textContent = str; return div.innerHTML 借浏览器能力转义，看似省事，但有硬伤。
常见错误现象：批量处理 100 条国际化文案时，每条都新建 DOM 元素 → 触发重排、内存泄漏、性能骤降；更糟的是，它不能处理属性值场景（比如你要转义的是 title 属性内容，不是文本节点）。
- 该方法本质是“把字符串当文本塞进去，再取回 HTML”，只适用于纯文本上下文，对属性值无效
- DOM 操作开销远高于正则替换，尤其在 SSR 或构建脚本里，应避免
- 真正稳妥的做法是：服务端用
htmlspecialchars()或等效函数，客户端只在明确需要动态插入且数据未转义时，用严格顺序的正则替换：str.replace(/&/g, '&').replace(/, '/g, '>').replace(/"/g, '"').replace(/'/g, ''')（注意顺序不能错，&必须最先）
最易被忽略的点：国际化不是“多语言翻译”就完事，而是整个输出链路的编码与转义契约。一个字符在数据库里是原始的，在 JSON 里是原始的，在模板里被转义了一次，在 JS 里又被转义一次——这种层层叠加的“安全错觉”，比完全不转义更危险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
