加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > JS > JavaScript基础

JavaScript 字符串

JavaScript基础 2022-04-24 02:11:34小码哥的IT人生shichen

JavaScript 字符串

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

JavaScript 字符串

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

示例代码：

var x = "Bill Gates"

完整实例：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p id="demo"></p>
<script>
var x = "Bill Gates";  // 用引号包围的字符串
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

运行结果：

Javascript 字符串

Bill Gates

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

示例代码：

var carname = "Porsche 911";
var carname = 'Porsche 911';

完整实例：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p>字符串在引号中书写。您能够使用单引号或双引号：</p>
<p id="demo"></p>
<script>
var carName1 = "Porsche 911"; // 双引号
var carName2 = 'Porsche 911'; // 单引号
document.getElementById("demo").innerHTML =
carName1 + " " + carName2; 
</script>
</body>
</html>

运行结果：

Javascript 字符串

字符串在引号中书写。您能够使用单引号或双引号：

Porsche 911 Porsche 911

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

示例代码：

var answer = "It's good to see you again!";
var answer = "He is called 'Bill'";
var answer = 'He is called "Bill"';

完整实例：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p>您可以在字符串中使用引号，只要不匹配围绕字符串的引号即可：</p>
<p id="demo"></p>
<script>
var answer1 = "It's good to see you again!";
var answer2 = "He is called 'Bill'";
var answer3 = 'He is called "Bill"'; 
document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3; 
</script>
</body>
</html>

运行结果：

Javascript 字符串

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

It's good to see you again!
He is called 'Bill'
He is called "Bill"

字符串长度

内建属性 length 可返回字符串的长度：

示例代码：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串属性</h1>
<p>length 属性返回字符串的长度：</p>
<p id="demo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>
</body>
</html>

运行结果：

Javascript 字符串属性

length 属性返回字符串的长度：

26

特殊字符

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

var y = "中国是瓷器的故乡，因此 china 与"China（中国）"同名。"

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

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

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

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

实例

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

示例代码

var x = "中国是瓷器的故乡，因此 china 与"China（中国）"同名。"

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串</h1>
<p>转义序列 " 在字符串中插入双引号。</p>
<p id="demo"></p>
<script>
var x = "中国是瓷器的故乡，因此 china 与"China（中国）"同名。";
document.getElementById("demo").innerHTML = x; 
</script>
</body>
</html>

运行结果：

Javascript 字符串

转义序列 " 在字符串中插入双引号。

中国是瓷器的故乡，因此 china 与"China（中国）"同名。

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

示例代码

var x = 'It's good to see you again';

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串</h1>
<p>转义序列 ' 在字符串中插入单引号。</p>
<p id="demo"></p>
<script>
var x = 'It' good to see you!';
document.getElementById("demo").innerHTML = x; 
</script>
</body>
</html>

运行结果：

Javascript 字符串

转义序列 ' 在字符串中插入单引号。

It' good to see you!

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

示例代码

var x = "字符 \ 被称为反斜杠。";

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串</h1>
<p>转义序列 \ 在字符串中插入反斜杠。</p>
<p id="demo"></p>
<script>
var x = "字符 \ 被称为反斜杠。";
document.getElementById("demo").innerHTML = x; 
</script>
</body>
</html>

运行结果：

Javascript 字符串

转义序列 \ 在字符串中插入反斜杠。

字符  被称为反斜杠。

转义字符（）也可用于在字符串中插入其他特殊字符。

其他六个 JavaScript 中有效的转义序列：

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

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

长代码行换行

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

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

示例代码

document.getElementById("demo").innerHTML =
"Hello Kitty.";

完整实例：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 语句</h2>
<p>
折行的最佳位置是运算符或逗号之后。
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Kitty.";
</script>
</body>
</html>

运行结果：

Javascript 语句

折行的最佳位置是运算符或逗号之后。

Hello Kitty.

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

示例代码

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串</h1>
<p>您可以用反斜杠在文本字符串中进行换行。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello 
Kitty";
</script>
</body>
</html>

运行结果：

Javascript 字符串

您可以用反斜杠在文本字符串中进行换行。

Hello Kitty

方法并不是 ECMAScript (JavaScript) 标准。

某些浏览器也不允许 字符之后的空格。

对长字符串换行的最安全做法（但是有点慢）是使用字符串加法：

示例代码

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串</h1>
<p>在字符串中进行换行的最安全方法是使用字符串相加。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello " +
"Kitty";
</script>
</body>
</html>

运行结果：

Javascript 字符串

在字符串中进行换行的最安全方法是使用字符串相加。

Hello Kitty

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

示例代码

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

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 语句</h1>
<p id="demo">您不能用反斜杠对代码行进行折行。</p>
<script>
document.getElementById("demo").innerHTML = 
"Hello Kitty";
</script>
</body>
</html>

运行结果：

Javascript 语句

您不能用反斜杠对代码行进行折行。

字符串可以是对象

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

var firstName = "Bill"

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

var firstName = new String("Bill")

示例代码

var x = "Bill";
var y = new String("Bill");
// typeof x 将返回 string
// typeof y 将返回 object

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串</h1>
<p id="demo"></p>
<script>
var x = "Bill";              // x 是字符串
var y = new String("Bill");  // y 是对象
document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>
</body>
</html>

运行结果：

Javascript 字符串

string
object

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

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

当使用 == 相等运算符时，相等字符串是相等的：

示例代码

var x = "Bill";             
var y = new String("Bill");
// (x == y) 为 true，因为 x 和 y 的值相等

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>绝不要把字符串创建为对象</h1>
<p>字符串与对象无法安全地比较。</p>
<p id="demo"></p>
<script>
var x = "Bill";              // x 是字符串
var y = new String("Bill");  // y 是对象
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>

运行结果：

绝不要把字符串创建为对象

字符串与对象无法安全地比较。

true

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

示例代码

var x = "Bill";             
var y = new String("Bill");
// (x === y) 为 false，因为 x 和 y 的类型不同（字符串与对象）

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>绝不要把字符串创建为对象</h1>
<p>JavaScript 对象无法比较。</p>
<p id="demo"></p>
<script>
var x = "Bill";              // x 是字符串
var y = new String("Bill");  // y 是对象
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>

运行结果：

绝不要把字符串创建为对象

Javascript 对象无法比较。

false

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

示例代码

var x = new String("Bill");             
var y = new String("Bill");
// (x == y) 为 false，因为 x 和 y 是不同的对象

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>绝不要把字符串创建为对象</h1>
<p>JavaScript 对象无法比较。</p>
<p id="demo"></p>
<script>
var x = new String("Bill");  // x 是对象
var y = new String("Bill");  // y 也是对象
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>

运行结果：

绝不要把字符串创建为对象

Javascript 对象无法比较。

false

示例代码

var x = new String("Bill");             
var y = new String("Bill");
// (x === y) 为 false，因为 x 和 y 是不同的对象

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>绝不要把字符串创建为对象</h1>
<p>JavaScript 对象无法比较。</p>
<p id="demo"></p>
<script>
var x = new String("Bill");  // x 是对象
var y = new String("Bill");  // y 也是对象
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>

运行结果：

绝不要把字符串创建为对象

Javascript 对象无法比较。

false

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

JavaScript 对象无法进行对比，比较两个 JavaScript 将始终返回 false。

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024