这下我终于弄懂了转义什么是转义？转义（Escaping）在编程和前端开发中是指通过特定的符号或方法将特殊字符转换为安全

什么是转义？

转义（Escaping）在编程和前端开发中是指通过特定的符号或方法将特殊字符转换为安全的、可被正确解析的格式，以避免语法错误、注入攻击或显示问题。

转义的定义

转义是通过在特殊字符前添加“转义字符”（通常是反斜杠 `` 或其他特定符号）来改变其含义，使其不被解析为代码或指令，而是作为普通字符处理。转义广泛应用于：

字符串处理：如 JavaScript 字符串中的引号或换行。
HTML：防止特殊字符（如 <、&）被解析为标签或实体，特别是在 UniApp 的 v-html 中。
URL：将空格或非 ASCII 字符编码为安全格式。
SQL/JSON：避免注入攻击或格式错误。

为什么需要转义？

防止语法错误：特殊字符可能被解析为代码或指令，导致程序出错。例如，在 JavaScript 字符串中，" 如果不转义，会终止字符串定义。
安全性：在前端（如 UniApp 的 v-html）中，未转义的用户输入可能导致 XSS（跨站脚本攻击）。
跨平台兼容：不同平台（如 H5、小程序）对字符的解析规则不同，转义确保一致性。

转义的常见场景与示例

1. JavaScript 字符串转义

在 JavaScript 中，某些字符（如引号、换行）需要用反斜杠 `` 转义。

const str = 'He said: "It's awesome!"'; // 转义双引号
console.log(str); // 输出: He said: "It's awesome!"
const multiline = 'Line 1\nLine 2'; // 转义换行符
console.log(multiline); // 输出:
// Line 1
// Line 2

常见转义字符：

'：单引号
"：双引号
\：反斜杠
\n：换行
\t：制表符

2. HTML 转义

在 HTML 或 UniApp 的 v-html 中，特殊字符（如 <、>、&）需要转义为 HTML 实体，以防止被解析为标签或导致 XSS 攻击。

<div v-html="escapedContent"></div>

// 未转义（不安全，可能导致 XSS）
const rawContent = '<script>alert("hacked")</script>';
// 手动转义
const escapedContent = rawContent
  .replace(/&/g, '&amp;')
  .replace(/</g, '&lt;')
  .replace(/>/g, '&gt;')
  .replace(/"/g, '&quot;')
  .replace(/'/g, '&#39;');
console.log(escapedContent); // 输出: &lt;script&gt;alert(&quot;hacked&quot;)&lt;/script&gt;

推荐工具：使用 DOMPurify 库自动转义，适合 UniApp 的 v-html：

import DOMPurify from 'dompurify';
const rawContent = '<script>alert("hacked")</script>';
const safeContent = DOMPurify.sanitize(rawContent);
// safeContent 可安全用于 v-html

3. CSS 转义

在 CSS 中（如 UniApp 的样式），某些字符（如 Unicode 字符或特殊符号）需要转义。

/* 转义字体名称中的特殊字符 */
@font-face {
  font-family: 'My\ Font'; /* 转义空格 */
  src: url('/static/fonts/MyFont.ttf') format('truetype');
}
.custom-text {
  font-family: 'My\ Font', sans-serif;
}

4. URL 转义

在 URL 中，特殊字符（如空格、中文）需要编码为 % 格式。

const url = 'https://example.com/path with space';
const encodedUrl = encodeURIComponent(url);
console.log(encodedUrl); // 输出: https%3A%2F%2Fexample.com%2Fpath%20with%20space

在 UniApp 的 H5 或小程序中，加载外部字体时，URL 编码确保路径正确：

wx.loadFontFace({
  family: 'MyCustomFont',
  source: `url("${encodeURIComponent('https://cdn.example.com/fonts/My Font.ttf')}")`,
  success: () => console.log('字体加载成功'),
  fail: (err) => console.error('字体加载失败', err)
});

5. 小程序特有转义

在微信小程序中，wx.loadFontFace 的 source 属性需要正确转义字体 URL 中的特殊字符。

wx.loadFontFace({
  family: 'MyCustomFont',
  source: 'url("https://cdn.example.com/fonts/My\ Font.ttf")', // 转义空格
  success: () => console.log('字体加载成功')
});

总结

推荐做法：

HTML 使用 DOMPurify 转义。
URL 使用 encodeURIComponent。
小程序端结合 wx.loadFontFace 和本地字体优先。