JavaScript 字符串
字符串是一种数据类型,由字符组成,用于表示文本数据。
使用字符串字面量就可以创建字符串。
var str1 = '';
var str2 = "";
以上例子创建了两个空字符串。字符串可以用单引号包裹,也可以用双引号包裹,是一样的。
大部分前端程序员都会选择单引号,这么做的原因是为了契合 HTML
的书写习惯,拼接 HTML 的时候,HTML 元素的可以直接使用双引号包裹。
var html = '<p class="tip">更多请<a href="/detail" target="_blank">了解详情</a></p>';
如果换成双引号则需要转义:
var html = "<p class=\"tip\">更多请<a href=\"/detail\" target=\"_blank\">了解详情</a></p>";
转义可以理解成字面意思,即转换字符的含义。
比如想在字符串里描述换行符,就会使用 \n
。
var str = '第一行\n第二行\n第三行';
console.log(str); // 将会换行的字符串
通常转义字符都是通过 \
开头的。
同理,如果需要在双引号包裹的字符串中使用双引号,或者单引号包裹的字符串中使用单引号,就需要对引号进行转义。
var str = '我'要'显'示'一'堆'单'引'号';
这样就会报错,JavaScript 无法知道这些引号的含义。
var str = '我\'要\'显\'示\'一\'堆\'单\'引\'号';
通过 \n
表示单引号,就可以让 JavaScript 理解,需要在字符串里描述单引号。
JavaScript 以下字符的转义:
文案描述是最常见的情景之一,文案本身就是字符串,使用字符串是最契合场景的。
function gameover(age) {
// 判断是否游戏结束
return age > ;
}
var isGameover = gameover();
if (isGameover) {
console.log('游戏结束');
}
游戏结束
就是确确实实的文案,用于展现。
通过日志简单调试的也是,也会用到字符串作为文案进行观察。
function something() {
console.log('循环开始之前');
var i
for (i = ; i < ; i--) {
console.log('循环中,第 ' + (i + ) + ' 次循环');
}
console.log('循环结束');
}
something();
以上模拟程序卡死的状态,通过调试很容易发现是由死循环导致的,原因是将循环的表达式写错了。
拼接 HTML
是前几年大部分前端程序员做的最多的事情之一。
现在有了许多前端框架,解放了很多 HTML
拼接的工作。
早期想渲染列表,需要前端程序员在 JavaScript 中拼接 HTML 后再使用。
function getList(content) {
return '<li class="list-item">' + content + '</li>';
}
var arr = [];
var i;
for (i = ; i <= ; i++) {
arr.push(getList('我是第' + i + '条'));
}
document.body.innerHTML = [
'<ul class="list">',
arr.join(''),
'</ul>',
].join('');
数组的 join
会将参数作为分隔符,将数组成员连接成字符串,认的分隔符是逗号。
不论是制作,还是业务需求的元素、文案调整,都需要拼接 HTML。
通常字符串可以用在任意场景
,因为可以人为的赋予他任何含义。
如使用字符串的 'true'
、'false'
来表示布尔值。
var isMan = 'false';
if (isMan === 'false') {
console.log('不是男的');
}
或者可以使用字符串描述对象:
var person = '小明,男,24岁,吃饭、睡觉、打游戏';
name = person.split(',')[];
console.log(name);
通过一定的规则来确定字符串的含义,如上面就是用逗号分隔,含义依次为姓名,性别,年龄,爱好
。
取值的时候通过 split
,将字符串按指定的字符分隔成数组。
这种情况通常会用在需要存储简单的数据结构,前端拿到的数据也许就是这样的,需要自己切分。
正常情况下前端开发者在开发过程中不建议这样做,因为有更好的数据类型来描述这些,JavaScript 提供了布尔值、对象来更好的、灵活的应对这些场景。
字符串是无法的,只能进行访问。
var str = '我是字符串';
console.log(str); // :"我是字符串"
这是直接访问整个字符串,还可以访问中间某字符。
var str = '一二三四五六七,7654321';
// 第字符
console.log(str[]); // :"一"
// 最后字符
console.log(str[str.length - ]); // :"1"
console.log(str.split('').pop()); // :"1"
通过字符串[下标]
的形式可以访问到某字符,这种访问通常会用在字符串遍历上。
字符串可以直接通过 length
长度。
var string = '1234567';
var len = string.length;
console.log(len); // :7
最常见的字符串拼接就是使用 +
符号:
var str1 = '我是';
var str2 = '小明';
console.log(str1 + str2);
还有一种是使用数组来拼接字符串:
var str1 = '我是';
var str2 = '一只鱼';
console.log([str1, str2].join('')); // :我是一只鱼
这种方式也很常见。
注意:许多文献中会提到这样拼接字符串的更好,效率更高。大部分浏览器确实如此,其引擎针对性的做了特殊优化,当然只有在非常大量的字符串拼接时才能感知到上的区别。
var str1 = '教练';
var str2 = '我想';
var str3 = '写';
var str4 = str1.concat(str2, str3);
console.log(str4);
使用 concat
可以接受任意个字符串作为参数,最后会拼接成字符串。
ES6提供了模版字符串,在模版字符串中拼接更加灵活。
String
对象也可以创建字符串,但不常用。
var str = new String('do sth.');
console.log(typeof str); // :object
console.log(str.concat('gugu')); // :do sth.gugu
可以观察到,使用 String
对象的字符串,实际上是对象
,
但使用 String
对象的字符串对象使用的时候基本和字符串无异。这部分会涉及到部分装箱拆箱的知识,具体可以查阅相关章节。
以下是一些常用,使用频率较高:
字符串常常用于拼接 HTML ,且前端开发者习惯使用单引号来包裹字符串。
大量的字符串拼接,利用数组的 join
比使用 +
连接字符串更好,前提是非常大量。
使用 join
更大的好处是多行的时候换行方便。
字符串基本可以胜任任何数据场景,但一般不会这么做,因为 JavaScript 提供了多种数据类型来应对各种业务场景。