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 中还有另外六个有效的转义序列:
退格键
换页
新队
回车
水平制表机
垂直制表符
上面的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 字符串是从文字创建的原始值:
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 字符串参考。
该参考包含所有字符串属性和方法的描述和示例。