JavaScript 字符串

JavaScript 字符串用于存储和操作文本。


JavaScript 字符串

JavaScript 字符串是引号中的零个或多个字符。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 字符串</h2>
  5. <p id="demo">
  6. <script>
  7. var x = "比尔盖茨"; // 用引号包围的字符串
  8. document.getElementById("demo").innerHTML = x;
  9. </script>
  10. </body>
  11. </html>

您能够使用单引号或双引号

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 字符串</h2>
  5. <p>字符串在引号中书写。您能够使用单引号或双引号:</p>
  6. <p id="demo">
  7. <script>
  8. var carName1 = "玛莎拉蒂 总裁"; // 双引号
  9. var carName2 = '玛莎拉蒂 总裁'; // 单引号
  10. document.getElementById("demo").innerHTML =
  11. carName1 + " " + carName2;
  12. </script>
  13. </body>
  14. </html>

您可以在字符串中使用引号,只要不匹配围绕字符串的引号即可:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 字符串</h2>
  5. <p>您可以在字符串中使用引号,只要不匹配围绕字符串的引号即可:</p>
  6. <p id="demo">
  7. <script>
  8. var answer1 = "再次见到你真好!";
  9. var answer2 = "他叫比尔";
  10. var answer3 = '他叫比尔';
  11. document.getElementById("demo").innerHTML =
  12. answer1 + "<br>" + answer2 + "<br>" + answer3;
  13. </script>
  14. </body>
  15. </html>

字符串长度

内置属性 length 可返回字符串的长度:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 字符串属性</h1>
  5. <p>length 属性返回字符串的长度:</p>
  6. <p id="demo">
  7. <script>
  8. var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  9. document.getElementById("demo").innerHTML = txt.length;
  10. </script>
  11. </body>
  12. </html>

特殊字符

由于字符串必须由引号包围,JavaScript 会误解这段字符串:

  1. var y = "中国是瓷器的故乡,因此 china 与"China(中国)"同名。"

该字符串将被切为 "中国是瓷器的故乡,因此 china 与 "。

避免此问题的解决方法是,使用 \ 转义字符。

反斜杠转义字符把特殊字符转换为字符串字符:

代码结果描述
\’单引号
\""双引号
\\反斜杠

序列 \" 在字符串中插入双引号:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 字符串</h1>
  5. <p>转义序列 \" 在字符串中插入双引号。</p>
  6. <p id="demo">
  7. <script>
  8. var x = "中国是瓷器的故乡,因此 china 与\"China(中国)\"同名。";
  9. document.getElementById("demo").innerHTML = x;
  10. </script>
  11. </body>
  12. </html>

序列 \’ 在字符串中插入单引号:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 字符串</h1>
  5. <p>转义序列 \' 在字符串中插入单引号。</p>
  6. <p id="demo">
  7. <script>
  8. var x = 'It\' good to see you!';
  9. document.getElementById("demo").innerHTML = x;
  10. </script>
  11. </body>
  12. </html>

序列 \ 在字符串中插入反斜杠:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 字符串</h1>
  5. <p>转义序列 \\ 在字符串中插入反斜杠。</p>
  6. <p id="demo">
  7. <script>
  8. var x = "字符 \\ 被称为反斜杠。";
  9. document.getElementById("demo").innerHTML = x;
  10. </script>
  11. </body>
  12. </html>

转义字符(\)也可用于在字符串中插入其他特殊字符。其他六个 JavaScript 中有效的转义序列:

代码结果
\b退格键
\f换页
\n新行
\r回车
\t水平制表符
\v垂直制表符

这六个转义字符最初设计用于控制打字机、电传打字机和传真机。它们在 HTML 中没有任何意义。


长代码行换行

为了最佳可读性, 程序员们通常会避免每行代码超过 80 个字符串。

如果某条 JavaScript 语句不适合一整行,那么最佳换行位置是某个运算符之后:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 语句</h2>
  5. <p>
  6. 换行的最佳位置是运算符或逗号之后。
  7. </p>
  8. <p id="demo">
  9. <script>
  10. document.getElementById("demo").innerHTML =
  11. "Hello Kitty.";
  12. </script>
  13. </body>
  14. </html>

您也可以在字符串中换行,通过一个反斜杠即可:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 字符串</h1>
  5. <p>您可以用反斜杠在文本字符串中进行换行。</p>
  6. <p id="demo">
  7. <script>
  8. document.getElementById("demo").innerHTML = "Hello \
  9. Kitty";
  10. </script>
  11. </body>
  12. </html>

您不能通过反斜杠对代码行进行换行:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 语句</h1>
  5. <p id="demo">您不能用反斜杠对代码行进行换行。</p>
  6. <script>
  7. document.getElementById("demo").innerHTML = \
  8. "Hello Kitty";
  9. </script>
  10. </body>
  11. </html>

字符串可以是对象

通常,JavaScript 字符串是原始值,通过字面方式创建:

  1. var firstName = "比尔"

但是字符串也可通过关键词 new 定义为对象:

  1. var firstName = new String("比尔")
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>JavaScript 字符串</h1>
  5. <p id="demo">
  6. <script>
  7. var x = "比尔"; // x 是字符串
  8. var y = new String("比尔"); // y 是对象
  9. document.getElementById("demo").innerHTML =
  10. typeof x + "<br>" + typeof y;
  11. </script>
  12. </body>
  13. </html>

请不要把字符串创建为对象。它会拖慢执行速度。

new 关键字使代码复杂化。也可能产生一些意想不到的结果:

当使用 == 相等运算符时,相等字符串是相等的:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>绝不要把字符串创建为对象</h1>
  5. <p>字符串与对象无法安全地比较。</p>
  6. <p id="demo">
  7. <script>
  8. var x = "比尔"; // x 是字符串
  9. var y = new String("比尔"); // y 是对象
  10. document.getElementById("demo").innerHTML = (x==y);
  11. </script>
  12. </body>
  13. </html>

当使用 === 运算符时,相等字符串是不相等的,因为 === 运算符需要类型和值同时相等。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>绝不要把字符串创建为对象</h1>
  5. <p>JavaScript 对象无法比较。</p>
  6. <p id="demo">
  7. <script>
  8. var x = "比尔"; // x 是字符串
  9. var y = new String("比尔"); // y 是对象
  10. document.getElementById("demo").innerHTML = (x===y);
  11. </script>
  12. </body>
  13. </html>

甚至更糟。对象无法比较:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1>绝不要把字符串创建为对象</h1>
  5. <p>JavaScript 对象无法比较。</p>
  6. <p id="demo">
  7. <script>
  8. var x = new String("比尔"); // x 是对象
  9. var y = new String("比尔"); // y 也是对象
  10. document.getElementById("demo").innerHTML = (x===y);
  11. </script>
  12. </body>
  13. </html>

请注意 (x==y) 与 (x===y) 的区别。JavaScript 对象无法进行对比,比较两个 JavaScript 将始终返回 false。