1.字面量
字面量是由语法表达式定义的常量,它是一个固定值,而不是一个变量,例如:'hello', 123, true,这些量都是字面量
2.字符串
表示方式
字符串有三种表示方式:
- 使用半角单引号
'
或双引号"
包含表示,例如:"string"
,'hello'
; - 使用反引号包含表示,这个符号通常在键盘主键区
1
键的左边第一个,上面画着一条波浪线,可以在英文输入法状态下直接按这个键打出反引号,它看起来是这样的:
let string = `hello world!`; // 这种形式是es新增的多行字符串,它允许换行
let lines = `hello
world`; // 这是合法的写法
⚠️多行字符串是es6标准的新增方式,要使用这个特性,浏览器必须支持es6
模版字符串
es6中,可以使用es6新增的模版字符串:
let name = '小明';
let age = 16;
let str = `${name}今年${age}岁了`;
console.log(str); // '小明今年16岁了',不需要用加号连接
// 上面的表达式相当于
let str2 = name + '今年' + age + '岁了' // 字符串使用引号,变量不使用引号
这个特性可以用在一些es5中难以处理的地方:
let imgSrc = './images/logo.jpg'
let ele = `
<div class="head">
<img src="${imgSrc}">
</div>
`;
3. 字符串处理
判断相等
使用==
或者===
来判断字符串是否相等:
'hello' == 'hello' // true
'123' === 123 // false,左侧是string类型,右侧是number类型
字符串长度
用string.length
表示字符串长度:
let str = 'hello world';
console.log(str.length); // 11
转义字符与特殊字符
js中的字符串用引号表示,如果引号本身就是字符串,那么写法上有一些变化,我们需要用转义字符来标记字符串中的特殊符号。
在原字符的前面加上反斜杠\
(这个按键一般在回车键上方,右方括号的右侧),就能表示这个字符的转义字符:
let str = '在引号中使用引号\'需要使用转义字符';
let str2 = '一个反斜杠符号要用\\来表示';
js中还有一些特殊符号,也要用反斜杠的方式表示:
符号 | 说明 |
---|---|
\0 | Null字节 |
\b | 退格符 |
\n | 换行符 |
\r | 回车符 |
\t | 制表符(Tab键可打出) |
\uXXXX | 四位十六进制数XXXX表示的Unicode字符,例如\u4f60\u597d 表示'你好' |
拓展:操作系统的换行符
- 在程序中,仅用
\n
表示换行- 在windows文件系统中,文件每行的结尾是
\r\n
(CRLF)- 在Unix(Linux、Mac)文件系统中,文件每行的结尾是
\n
(LF)因此假如在windows下打开Unix系统下的文件,所有的字符都会出现在同一行或者出现小黑点,在Unix系统下打开windows文件,每行结尾可能多出其他符号。
使用webstorm或vscode等编辑器时,注意留意软件左下角或右下角的换行符(CRLF和LF)提示。
获取指定位置的字符
let str = 'hello';
str.charAt(2); // 'l',取2号索引位置的字符(从0开始计数)
str[1]; // 'e',
str.charCodeAt(0); // '104',取0号索引位置字符的ASCII码
String.fromCharCode(104); // 'h',将ASCII码转换为对应的字符
⚠️fromCharCode()是一个类型方法,不能用字符串对象来调用,应该使用String来调用。
ASCII码
ASCII码全称是美国标准信息交换码,是国际标准化组织(ISO)认定的国际标准,称为ISO646标准,适用于全部拉丁文字符。
ASCII码约定了常用字符使用什么样的二进制编码表示,将二进制转换为十进制后:
- 48-57表示0-9十个阿拉伯数字
- 65-90表示从A-Z的26个大写英文字母
- 97-122表示从a-z的26个小写英文字母
ASCII码和后续由ASCII码表扩展的其他字符编码是国际通用标准,可以将ASCII码理解为计算机软件与计算机硬件沟通的语言。
截取字符串
截取字符串中的指定字符有多种方法:
let str = 'hello.mp3';
// string.slice(start, end)
str.slice(0, 5); // 'hello',截取从start->end(不包含end)的字符
str.slice(-3); // 'mp3',从后向前截取字符
// string.substring(start, [stop]),方括号表示可选
str.substring(0, 5); // 'hello',截取从start->stop(不包含stop)的字符
str.substring(6); // 'mp3',截取从start到末尾的字符
// string.substr(start, [length])
str.substr(0, 5); // 'hello',从start开始,截取length个
str.substr(6); // 'mp3',从start开始截取到结尾
str.substr(-3); // 'mp3',从后向前截取字符
⚠️在js中,字符串处理方法一般不会修改原字符串,而是返回一个新的字符串:
let str = 'hello'; console.log(str.slice(2)); // 'llo',返回新字符串 console.log(str); // 'hello',原字符串没有被修改
查找字符串
使用indexOf()
和lastIndexOf()
方法可以查找一个字符串在另一个字符串中出现的位置:
let str = 'hello world';
str.indexOf('o'); // 4,返回字符串第一次出现的位置(索引号)
str.indexOf('a'); // -1,若没有找到,则返回-1
str.lastIndexOf('o'); // 7,返回字符串最后一次出现的位置
str.indexOf('el'); // 1,也可以查询多个字符,返回首字符所在的位置
拓展:正则表达式
除了js自带的这些字符串处理函数,还有一种叫做正则匹配的方法来处理字符串,目前暂不展开讨论。
其他字符串处理函数
split
split()
函数可以按分隔符将字符串拆分为数组(在本节的后面会讲到):
let str = '1991-10-11';
str.split('-'); // ['1991', '10', '11'],得到一个新数组,数组中保存的是按`-`符号拆分好的字符串
let str2 = 'hello';
str.split(''); // ['h', 'e', 'l', 'l', 'o'],若括号中写空字符串`''`,则将字符串展开为数组
str.split(); // ['hello'],若括号中不写内容,则将字符串转换为数组
trim
trim()
函数可以去掉字符串首尾的空白(空格符、换行符、制表符等):
let str = ' hello ';
str.trim(); // 'hello',去除字符串首尾两端的空格
大小写转换
使用toUpperCase()
和toLowerCase()
来进行大小写转换:
let str = 'Hello Wolrd';
str.toUpperCase(); // 'HELLO WORLD',转换为大写
str.toLowerCase(); // 'hello world',转换为小写
4. 数组
基本概念
数组(Array)是有序排列的数据的集合。
有许多方式来创建数组:
let arr1 = [0, 2, 4, 6, 8]; // 直接赋值一个数组
let arr2 = new Array(); // 定义一个空数组
let arr3 = []; // 定义一个空数组
arr3.length = 5; // 定义一个长度为5的空数组(空的位置会自动用undefined填充)
let arr4 = new Array(8); // 定义一个长度为8的数组
let arr5 = new Array(0, 2, 4, 6, 8); // 定义数组并赋值
console.log(arr); // 在控制台查看数组
数组就像更衣室里一个个有序排列的柜子,我们可以将不同类型的数据保存在数组的不同柜子中,数组中存放的数据,称为元素。
数组的长度,用arr.length
表示,就代表柜子的个数:
let arr = ['a', 1, null]; // 定义一个存有字符串、数字和null的有3个元素的数组
console.log(arr.length); // 3,数组的长度为3,与元素个数相同
⚠️为了方便阅读,接下来的内容中需要打印返回值的位置,不再书写
console.log()
函数,而是直接在注释中给出返回值,例如:arr.length; // 3
使用数组名[索引号]
的方式来访问(即查看、获取)数组元素,索引号是元素在数组中的位序,从0开始计数:
let arr = [2, 4, 6, 8, 10];
arr[0]; // 2,访问0号索引位置的元素
arr[arr.length - 1]; // 10,访问数组中的最后一个元素
数组中也可以保存另一个数组:
let arr = [
[1, 2, 3],
['a', 'b', 'c']
];
arr[1]; // ['a', 'b', 'c']
arr[1][2]; // 'c'
⚠️没有特殊情况,不要直接对
arr.length
赋值,因为这样会改变数组的长度,长度缩短会导致数组中的数据丢失,
数组处理
赋值
通过直接对数组的某个索引位置赋值,可以修改数组:
let arr = [2, 4, 6, 8, 10];
arr[0] = 5
添加元素
直接赋值
直接对索引位置赋值来向添加元素:
let arr = [2, 4, 6];
arr[3] = 8;
arr; // [2, 4, 6, 8]
arr[5] = 10;
arr; // [2, 4, 6, undefined, 10],空位会自动用undefined补全
push在末尾添加
push()
方法能够向数组末尾添加一个或多个元素,返回新数组的长度,这个方法会修改原数组:
let arr = [1, 2, 3];
arr.push(4); // 4
arr.push('a', 5); // 6
arr; // [1, 2, 3, 4, 'a', 5],原数组被改变了
unshift在开头添加
unshift()
方法能够向数组的开头添加一个或多个元素,返回新数组的长度:
let arr = [1, 2, 3];
arr.unshift('a'); // 4
arr; // ['a', 1, 2, 3]
删除元素
pop删除最后一个元素
使用pop()
方法来删除数组的最后一个元素,返回被删除的这个元素:
let arr = ['a', 'b'];
arr.pop(); // 'b'
arr; // ['a']
shift删除第一个元素
使用shift()
方法来删除数组的第一个元素,返回被删除的这个元素:
let arr = ['a', 'b'];
arr.shift(); // 'a'
arr; // ['b']
splice删除指定元素
splice()
方法可以删除指定的一个或者连续的多个元素,返回被删除元素的集合(即以数组形式返回被删除的元素),这个方法也可以替换指定的元素:
语法:
string.splice(index, [length], [item1, item2, ..., itemX])
index:表示从第几个索引号开始删除
length(可选):表示删除几个元素,默认为1个
item(可选):表示向删除元素的位置添加新元素
例如:string.splice(1, 3)
表示从1号索引位置开始,删除3个元素
let arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(0); // ['a']
arr; // ['b', 'c', 'd', 'e']
arr.splice(1, 2); // ['c', 'd']
arr; // ['b', 'e']
arr.splice(0, 1, 'hello', 'world'); // ['b']
arr; // ['hello', 'world', 'e']
数组的连接与分割
数组的连接与分割都不会破坏原数组,这些方法都会返回一个新数组作为结果。
连接数组
concat()
方法可以连接两个数组,返回连接后的新数组:
let a = [1, 2, 3];
let b = [4, 5, 6];
a.concat(b); // [1, 2, 3, 4, 5, 6]
join()
方法将数组内的元素连接为一个新字符串:
let arr = ['a', 'b', 'c'];
arr.join(); // 'a,b,c'
arr.join(''); // 'abc'
arr.join('-'); // 'a-b-c'
分割数组
使用slice()
方法来提取数组中的一段元素,返回一个新数组:
let arr = [1, 2, 3, 4];
arr.slice(1, 2); // [2, 3],注意,slice(n, m)函数的表示从n号索引位置开始,到m号索引位置结束,与splice()函数的参数不同,这里表示的是从1号索引取到2号索引
arr.slice(1); // [2, 3, 4],不写第二个参数,表示截取到结尾
查找元素
与字符串类似,在数组中,可以查找元素是否在数组中,也可以查找元素在数组中的哪个索引位置,使用indexOf()
和lastIndexOf()
方法来进行查找:
let arr = ['a', 'b', 'c', 'a'];
arr.indexOf('a'); // 0
arr.indexOf('a', 1); // 3,第二个参数1表示从1号索引位置后开始查找,因此找到的是第二个'a'
arr.indexOf('d'); // -1,没有找到时,返回-1
本系列教程作品采用 [知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议] 进行许可。 转载请发邮件到我的邮箱340349237@qq.com,并注明作者Tianzhen。
练习:Day2.5:巩固练习