JS 转义字符处理|极客笔记

JS 转义字符处理

在 JavaScript 中，字符串经常会出现一些特殊字符，如换行符、制表符、双引号等，为了能够正确显示这些特殊字符，我们需要对其进行转义处理。本文将详细介绍 JavaScript 中常见的转义字符处理。

什么是转义字符

转义字符是一些在字符串中具有特殊含义的字符，如换行符（\n）、制表符（\t）、双引号（\”）等。在 JavaScript 中，我们可以通过在字符前面加上反斜杠（\）来表示这些特殊字符。

常见的转义字符

下表列出了 JavaScript 中常见的转义字符及其含义：

转义字符	含义
\b	退格符
\t	制表符
\n	换行符
\v	垂直制表符
\f	换页符
\r	回车符
\	反斜杠
\’	单引号
\”	双引号

在字符串中使用转义字符

在 JavaScript 字符串中使用转义字符非常简单，只需要在特殊字符前面添加一个反斜杠即可。下面是一些示例：

var str1 = "Hello, \nworld!";
var str2 = "This is a\ttab";
var str3 = "He said, \"She's beautiful\"";

console.log(str1);
console.log(str2);
console.log(str3);

上面的示例中，我们分别使用了换行符、制表符和双引号来演示如何在字符串中使用转义字符。运行上面的代码，将得到以下输出：

Hello,
world!
This is a    tab
He said, "She's beautiful"

可以看到，转义字符在字符串中能够正确地被处理。

使用 Unicode 转义字符

除了常见的转义字符外，JavaScript 还支持使用 Unicode 转义字符来表示任意 Unicode 字符。Unicode 转义字符由 \u 开头加上四个十六进制数字表示。

var u = "\u00A9";
console.log(u); // ©

实际应用：转义 HTML 特殊字符

在前端开发中，经常需要将一些特殊字符在 HTML 页面中正确显示。其中最常见的就是对 HTML 实体（entity）进行转义。比如 < 转义为 <，> 转义为 >，& 转义为 & 等。

为了方便处理这些 HTML 实体，可以使用下面的函数进行转义：

function escapeHtml(str) {
    var map = {
        '&': '&',
        '<': '<',
        '>': '>',
        '"': '"',
        "'": '''
    };

    return str.replace(/[&<>"']/g, function (m) { return map[m]; });
}

var html = '<h1>Hello, world!</h1>';
var escapedHtml = escapeHtml(html);

console.log(escapedHtml); // <h1>Hello, world!</h1>

上面的示例中，escapeHtml 函数接受一个字符串参数，将其中的 <, >, &, ", ' 这几个字符进行 HTML 实体转义，并返回转义后的结果。