Web前端之路

9、字符串和数学常用方法

2019-08-04  本文已影响6人  宁公子_5dce

字符串方法和属性:

和数组一样,字符串也有自己的方法,来帮助我们处理字符串

原始值,比如“Bill Gates”,无法拥有属性和方法(因为它们不是对象)。
但是通过 JavaScript,方法和属性也可用于原始值,因为在执行方法和属性时 JavaScript 将原始值视为对象。

字符串长度length:

//声明一个变量,然后将一个字符串赋值给它
var text = "hello word";
//声明一个变量用来接收length返回的值
var sln = text.length
console.log(sln);
//输出结果为:10

总结: 可以看到字符串的长度包含了字符串中的所有内容,空格也包含在内

查找字符串中的某个字符:

查找字符首次出现的位置indexOf():

//声明一个变量,然后将一个字符串赋值给它
var text = "hello word";
//声明一个变量用来接收indexOf()返回的值
var sln = text.indexOf("o");
console.log(sln);
//输出结果为:4

查找字符最后一次出现的位置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()方法:

//创建一个变量并赋值给他一个字符串
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():

//创建一个变量并赋值给他一个字符串
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():

//创建一个变量并赋值给他一个字符串
var text = "I love you";
//创建一个变量用来接收字符
var str = text.charAt(5);
console.log(str);//输出结果:e

返回指定位置的Unicode编码charCodeAt():

//创建一个变量并赋值给他一个字符串
var text = "I love you";
//创建一个变量用来接收截取到的片段
var str = text.charCodeAt(5);
console.log(str);//输出结果:101

将字符串分割并转化为数组:

//创建一个变量并赋值给他一个字符串
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

还有几个需搭配正则表达式

JS中字符串方法有很多,如果上面没有你需要的,请看这里

数学方法和属性:

这里先介绍一些常用的数学方法:Math对象,它们都是被封装好的工具,他们很简单,直接拿来使用就好:

圆周率Math.PI:

console.log(Math.PI);
//输出:
3.141592653589793

返回参数的绝对值:

console.log(Math.abs(-5));
//输出结果为5

数字的取整

四舍五入Math.round():

console.log(Math.round(2.6));
//输出3
console.log(Math.round(3.2));
//输出3

向上去整Math.ceil();

console.log(Math.ceil(3.2));
//输出结果为:4

向下取整Math.floor():

console.log(Math.floor(3.9))
//输出结果为:3

获取最大或最小值:

获取最小值Math.min():

var numMin = Math.min(0,15,30,-5,21,350,-70,55)
console.log(numMin);
//输出结果为-70

获取最大值Math.max():

var numMax = Math.max(0,15,30,-5,21,350,-70,55)
console.log(numMax);
//输出结果为350

创建随机数:

创建随机数这个方法在JS能用到的地方很多,所以这个是很重要的:

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

更多更详细的随机数方法

JS中的数学方法还有很多,如果上面没有你需要的请看这里

上一篇 下一篇

猜你喜欢

热点阅读