字符串方法和属性:
和数组一样,字符串也有自己的方法,来帮助我们处理字符串
原始值,比如“Bill Gates”,无法拥有属性和方法(因为它们不是对象)。
但是通过 JavaScript,方法和属性也可用于原始值,因为在执行方法和属性时 JavaScript 将原始值视为对象。
字符串长度length:
-
length
属性返回字符串长度
//声明一个变量,然后将一个字符串赋值给它
var text = "hello word";
//声明一个变量用来接收length返回的值
var sln = text.length
console.log(sln);
//输出结果为:10
总结: 可以看到字符串的长度包含了字符串中的所有内容,空格也包含在内
查找字符串中的某个字符:
查找字符首次出现的位置indexOf():
-
indexOf()
方法返回字符串中指定文本首次出现的索引(位置)
//声明一个变量,然后将一个字符串赋值给它
var text = "hello word";
//声明一个变量用来接收indexOf()返回的值
var sln = text.indexOf("o");
console.log(sln);
//输出结果为:4
查找字符最后一次出现的位置lastIndexOf():
- lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引:
//声明一个变量,然后将一个字符串赋值给它
var text = "hello word";
//声明一个变量用来接收lastIndexOf()返回的值
var sln = text.lastIndexOf("o");
console.log(sln);
//输出结果为:7
我们试着查询一个不存在的元素
//声明一个变量,然后将一个字符串赋值给它
var text = "hello word";
//声明一个变量用来接收lastIndexOf()返回的值
var sln = text.lastIndexOf("z");
var sln1 = text.indexOf("z");
console.log(sln);
console.log(sln1);
//输出结果为:-1
这两种方法都可以传入第二个参数
//声明一个变量,然后将一个字符串赋值给它
var text = "hello word";
//声明一个变量用来接收lastIndexOf()返回的值
var sln = text.lastIndexOf("o",5);//从参数位置往后查
var sln1 = text.indexOf("l",3);//从参数位置往前查
console.log(sln);
console.log(sln1);
//输出结果为:4 3
总结:
1、字符串可以使用索引,它里面的每个元素都有相应的索引
2、字符串的索引与数组相同,都是从0开始计数,且字符串中所有元素都拥有索引,包括空格
3、如果未找到字符,indexOf()
和lastIndexOf()
均返回 -1。
4、两个方法都可以传入参数作为查询起始位置,不同的是,indexOf()
方法是从参数位置向尾部查,而lastIndexOf()
方法是从参数位置向头部查询
截取部分字符串:
在字符串方法中有三种截取字符串片段的方法:
slice()方法:
-
slice()
提取字符串的某个部分并在新字符串中返回被提取的部分
看着是不是很熟悉?没错这就是在数组中用过的方法,它在字符串中同样有效
//创建一个变量并赋值给他一个字符串
var text = "I love you";
//创建一个变量用来接收截取到的片段
var str = text.slice(2,6);
console.log(str);//输出结果:love
console.log(text);//输出结果:I love you
总结:
1、很明显,与数组一样,slice()方法设置的两个参数分别是开始位置和终止位置,截取的片段从起始索引开始,在终止索引之前结束.
2、slice()方法将截取到的字符串作为返回值返回,但是并不会改变原字符串
3、若忽略第二个参数,则将截取字符串剩余部分
注意: 与数组索引一样,字符串的操作同样可以将索引设为负值,反向查询
substring()方法:
-substring()
类似于slice()
,但是substring()方法不能接受负值索引
//创建一个变量并赋值给他一个字符串
var text = "I love you";
//创建一个变量用来接收截取到的片段
var str = text.substring(2,6);
console.log(str);//输出结果:love
console.log(text);//输出结果:I love you
总结:
1、它的作用与slice()方法一样,设置的两个参数同样是开始和结束位置,且并不会改变原字符串
2、唯一的区别就是不能传负值,不然负值将成为0
3、它截取两个位置之间的字符,所以对实参的先后顺序没有要求.但一般都是按照开始在前结束在后的习惯
substr():
-
substr()
方法类似于slice()
,但是substr()的第二个参数是截取字符串的长度(数量).
//创建一个变量并赋值给他一个字符串
var text = "I love you";
//创建一个变量用来接收截取到的片段
var str = text.substr(2,4);
console.log(str);//输出结果:love
console.log(text);//输出结果:I love you
//注意,我将实参换为了 2、4
总结:
1、 同样是截取字符串,它的两个参数第一个是开始位置,第二个是截取长度
2、如果省略第二个字符,则截取剩下的所有部分
3、第一个参数可以传负值,从尾部开始计算位置,但是第二个参数不能为负
4、substr()
并不会改变原字符串
连接字符串:
concat():
这个方法也是和数组的一样,前面绑定字符串的变量名,将要拼接进来的字符串作为参数传进来
//创建一个变量并赋值给他一个字符串
var text = "I love you";
//创建一个变量用来接收新的字符串
var str = text.concat("我爱你");
console.log(str);//输出结果:I love you我爱你
console.log(text);//输出结果:I love you
//新添加的字符串被拼接到了源字符串的后面
还记得吗?我们在之前的时候说过,加号(+)在作用于字符串的时候是有拼接的作用的,它和concat()方法是等效的,所以我们会常用加号(+).
另外,是不是发现所有的字符串方法都不会对原字符串产生影响?我们引用w3school的话:
所有字符串方法都会返回新字符串。它们不会修改原始字符串。
正式地说:字符串是不可变的:字符串不能更改,只能替换。
提取字符串字符:
有两个提取字符串字符的安全方法:
返回指定位置的字符charAt():
- charAt() 方法返回字符串中指定下标(位置)的字符串:
//创建一个变量并赋值给他一个字符串
var text = "I love you";
//创建一个变量用来接收字符
var str = text.charAt(5);
console.log(str);//输出结果:e
返回指定位置的Unicode编码charCodeAt():
- charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码:
//创建一个变量并赋值给他一个字符串
var text = "I love you";
//创建一个变量用来接收截取到的片段
var str = text.charCodeAt(5);
console.log(str);//输出结果:101
将字符串分割并转化为数组:
- 可以通过 split() 将字符串分割并转换为数组:
split();其中的参数传的是分割字符:
//创建一个变量并赋值给他一个字符串
var text = "I love you";
//创建一个变量用来接收数组
var str = text.split(" ");
console.log(str);
//输出结果:["I", "love", "you"]
实参传的是一个空格,分割的时候就以空格为分割字符,从空格处分割开
//创建一个变量并赋值给他一个字符串
var text = "I love you";
//创建一个变量用来接收数组
var str = text.split("");
console.log(str);
//输出结果:["I", " ", "l", "o", "v", "e", " ", "y", "o", "u"]
实参传的是一个空串,分割的时候就会把每一个字符都分开,包括空格
//创建一个变量并赋值给他一个字符串
var text = "I love you";
//创建一个变量用来接收数组
var str = text.split("o");
console.log(str);
//输出结果:["I l", "ve y", "u"]
实参传的是o,字符串便从o处被分割
删除字符串两端的空白符:
trim()方法,此方法不适用于IE8或更低版本,如果想支持IE8,可搭配正则表达式replace()方法代替:
//创建一个变量并赋值给他一个字符串
var text = " I love you ";
//创建一个变量用来接收新字符串
var str = text.trim();
console.log(str);
//输出结果: I love you
字符串两端的字符已被去除
转换大小写:
通过toUpperCase()
把字符串转换为大写
//创建一个变量并赋值给他一个字符串
var text = "I love you";
//创建一个变量用来接收新字符串
var str = text.toUpperCase();
console.log(str);
//输出结果: I LOVE YOU
通过toLoweCase
把字符串转换为小写:
//创建一个变量并赋值给他一个字符串
var text = "I LOVE YOU";
//创建一个变量用来接收新字符串
var str = text.toUpperCase();
console.log(str);
//输出结果: I love you
还有几个需搭配正则表达式
- 这几个都需要搭配着正则表达式来用,所以等讲到正则再讲这个
match() 正则匹配
replace() 正则替换
search()
JS中字符串方法有很多,如果上面没有你需要的,请看这里
数学方法和属性:
这里先介绍一些常用的数学方法:Math对象,它们都是被封装好的工具,他们很简单,直接拿来使用就好:
圆周率Math.PI:
- 直接返回圆周率
console.log(Math.PI);
//输出:
3.141592653589793
返回参数的绝对值:
- 使用Math.abs();取绝对值
console.log(Math.abs(-5));
//输出结果为5
数字的取整
四舍五入Math.round():
- 将传入的数字进行四舍五入并返回:
console.log(Math.round(2.6));
//输出3
console.log(Math.round(3.2));
//输出3
向上去整Math.ceil();
- 若输入的值小数点后不等零,则向上舍入,比如1.2向上舍入等于2
console.log(Math.ceil(3.2));
//输出结果为:4
向下取整Math.floor():
- 若输入的值小数点后不等于零,则舍弃掉小数点后的数,如3.9向下舍入等于3
console.log(Math.floor(3.9))
//输出结果为:3
获取最大或最小值:
获取最小值Math.min():
- 使用Math.min()查找参数列表里的最小值:
var numMin = Math.min(0,15,30,-5,21,350,-70,55)
console.log(numMin);
//输出结果为-70
获取最大值Math.max():
- 使用Math.max()查找参数列表里的最大值:
var numMax = Math.max(0,15,30,-5,21,350,-70,55)
console.log(numMax);
//输出结果为350
创建随机数:
创建随机数这个方法在JS能用到的地方很多,所以这个是很重要的:
-
Math.random()
返回介于 0(包括) 与 1(不包括) 之间的随机数:
console.log(Math.random());
//输出:0.392782796677708
//输出:0.9383646077609944
//输出:0.7952964314955755
可以看到,没错输出的值都是不同的,位数也不同,但是这样的随机数不是我们想要的
怎么才能得到我们想要的随机数呢?我们来看一下:
//我想获得0-10之间的随机数怎么办
var num = Math.floor(Math.random()*11);
//创建一个随机数并乘以11,且向下取整
console.log(num);
//输出的值:3 10 1 7 8 ...
可以看到,因为随机数的值默认是0-1之间的小数,所以我们乘以10,就变成了0-10之间的数了,但是小数怎么办呢?我们给他取整
单向上取整的话,就会变成1-10,单向下取整的话,就会变成0-9,若是采用四舍五入的方法的话就是0-10.
所以采用向上取整,就要乘以9,向下取整,就要乘以11