JavaScript 字符串


目录

    显示目录

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

JavaScript 字符串是写在引号内的零个或多个字符。

例子

let text = "John Doe";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p id="demo"></p>

<script>
let text = "John Doe";  // String written inside quotes
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

您可以使用单引号或双引号:

例子

let carName1 = "Volvo XC60";  
  // Double quotes
let carName2 = 'Volvo XC60';  // Single quotes 

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>Strings are written inside quotes. You can use single or double quotes:</p>

<p id="demo"></p>

<script>
let carName1 = "Volvo XC60"; // Double quotes
let carName2 = 'Volvo XC60'; // Single quotes

document.getElementById("demo").innerHTML =
carName1 + " " + carName2; 
</script>

</body>
</html>


您可以在字符串内使用引号,只要它们与引号不匹配即可 围绕字符串:

例子

let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<p>You can use quotes inside a string, as long as they don't match the quotes surrounding the string.</p>

<p id="demo"></p>

<script>
let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"'; 

document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3; 
</script>

</body>
</html>



字符串长度

要查找字符串的长度,请使用内置的 length 属性:

例子

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The length Property</h2>

<p>The length of the string is:</p>
<p id="demo"></p>

<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>

</body>
</html>



转义字符

因为字符串必须写在引号内,所以 JavaScript 会误解这个字符串:

let text = "We are the so-called "Vikings" from the north.";

该字符串将被截断为“我们是所谓的”。

避免此问题的解决方案是使用反斜杠转义字符

反斜杠 (\) 转义字符将特殊字符转换为字符串字符:

Code Result Description
\' ' Single quote
\" " Double quote
\\ \ Backslash

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

例子

let text = "We are the so-called \"Vikings\" from the north.";

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \" inserts a double quote in a string.</p>

<p id="demo"></p>

<script>
let text = "We are the so-called \"Vikings\" from the north.";
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

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

例子

let text= 'It\'s alright.';

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \' inserts a single quote in a string.</p>

<p id="demo"></p>

<script>
let text = 'It\'s alright.';
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

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

例子

let text = "The character \\ is called backslash.";

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The escape sequence \\ inserts a backslash in a string.</p>

<p id="demo"></p>

<script>
let text = "The character \\ is called backslash.";
document.getElementById("demo").innerHTML = text; 
</script>

</body>
</html>

JavaScript 中还有另外六个有效的转义序列:

\b

退格键

\f

换页

\n

新队

\r

回车

\t

水平制表机

\v

垂直制表符

上面的6个转义字符本来是为了控制 打字机、电传打字机和传真机。它们在 HTML 中没有任何意义。


打破长代码行

为了获得最佳的可读性,程序员通常希望避免代码行长于 80 个字符。

如果 JavaScript 语句无法容纳在一行中,那么最好的中断位置 它位于运算符之后:

例子

document.getElementById("demo").innerHTML =
"Hello Dolly!";

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>
The best place to break a code line is after an operator or a comma.
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>

</body>
</html>

您还可以使用单个反斜杠在文本字符串中分解代码行:

例子

document.getElementById("demo").innerHTML = 
"Hello \
Dolly!";

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>
You can break a code line within a text string with a backslash.
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>

</body>
</html>

\ 方法不是首选方法。它可能没有普遍支持。
某些浏览器有 \ 字符后面不允许有空格。

分解字符串的更安全方法是使用 string 添加:

例子

document.getElementById("demo").innerHTML = "Hello " + 
"Dolly!";

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p>The safest way to break a code line in a string is using string addition.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>

</body>
</html>

您不能用反斜杠分隔代码行:

例子

document.getElementById("demo").innerHTML = \ 
"Hello Dolly!";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p id="demo">You cannot break a code line with a \ backslash.</p>

<script>
document.getElementById("demo").innerHTML = \
"Hello Dolly.";
</script>

</body>
</html>

JavaScript 字符串作为对象

通常,JavaScript 字符串是从文字创建的原始值:

let x = "John";

但字符串也可以使用关键字 new 定义为对象:

let y = new String("John");

例子

let x = "John";
let y = new String("John");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>

<p id="demo"></p>

<script>
// x is a string
let x = "John";

// y is an object
let y = new String("John");

document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>

</body>
</html>

不要创建 Strings 对象。

new 关键字使代码变得复杂并降低执行速度。

字符串对象可能会产生意想不到的结果:

使用 == 运算符时,x 和 y 相等

let x = "John";
let y = new String("John");

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>Strings and objects cannot be safely compared.</p>

<p id="demo"></p>

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

使用 === 运算符时,x 和 y 不等于

let x = "John";
let y = new String("John");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>Strings and objects cannot be safely compared.</p>

<p id="demo"></p>

<script>
let x = "John";        // x is a string
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

请注意 (x==y)(x===y) 之间的区别。

(x == y) 是真是假?

let x = new String("John");
let y = new String("John");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>JavaScript objects cannot be compared.</p>

<p id="demo"></p>

<script>
let x = new String("John");  // x is an object
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>

</body>
</html>

(x === y) 是真是假?

let x = new String("John");
let y = new String("John");

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>Never Create Strings as Objects</h2>
<p>JavaScript objects cannot be compared.</p>

<p id="demo"></p>

<script>
let x = new String("John");  // x is an object
let y = new String("John");  // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>

</body>
</html>

比较两个 JavaScript 对象总是返回false

完整的字符串参考

有关完整的字符串参考,请访问我们的:

完整的 JavaScript 字符串参考。

该参考包含所有字符串属性和方法的描述和示例。