JavaScript 转义字符

为什么要使用转义字符？

在学习 JavaScript 转义字符之前，我们先来看一个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        console.log("绿叶网 - 为好教程，全力以赴。");
    </script>
</body>
</html>

运行结果如下。

绿叶网 - 为好教程，全力以赴。

如果我们想要打印出下面这样的结果，此时该怎么做呢？

绿叶网 - 为"好教程"，全力以赴。

不少小伙伴首先想到的，可能就是使用下面这句代码来实现：

console.log("绿叶网 - 为"好教程"，全力以赴。");

试过的小伙伴肯定会疑惑：“怎么在页面没有输出内容呢？” 其实大家仔细观察一下就知道，双引号都是成对出现的，这句代码有 4 个双引号，JavaScript 是无法判断前后哪两个双引号是一对的。为了避免这种情况发生，JavaScript 引入了转义字符。

JavaScript 中的转义字符

在 JavaScript 中，所谓的转义字符，指的是在默认情况下某些字符在浏览器是无法显示的，不过为了能够让这些字符能够显示出来，我们可以使用这些字符对应的转义字符来代替。在 JavaScript 中，常见的转义字符如下表所示。

常见的转义字符
转义字符	说明
\\	反斜杠本身
\'	英文单引号
\"	英文双引号
\n	换行符

实际上，JavaScript 中的转义字符很多，但是我们只需要记住上面 3 种就可以了。此外还需要特别说明一下，对于字符串的换行，有以下 3 种情况。

如果是在 document.write() 中换行，则应该用：<br>。
如果是在 alert() 中换行，则应该用：\n。
如果是在 console.log() 中换行，则应该用：\n。

示例 1：document.write() 中的换行

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        document.write("绿叶网<br>为好教程，全力以赴。");
    </script>
</body>
</html>

运行结果如下。

document.write()中的换行

示例 2：alert() 中的换行

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        alert("绿叶网\n为好教程，全力以赴。");
    </script>
</body>
</html>

运行结果如下。

alert()中的换行

分析：

“\n” 是转义字符，一般用于对话框中来实现文本换行。这里如果用 <br> 就无法实现了，这是因为 <br> 是一个 HTML 标签。

示例 3：console.log() 中的换行

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        console.log("绿叶网\n为好教程，全力以赴。");
    </script>
</body>
</html>

运行结果如下。

绿叶网
为好教程，全力以赴。

提示: 在现代 JavaScript（ES6）中，我们还可以使用 “反引号 ( `)” 来定义模板字符串。在模板字符串中，我们可以直接换行，而不需要使用 “\n”。对于模板字符串，感兴趣的小伙伴可以关注绿叶网未来上线的精品课—— “ES6 快速上手”。