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

字符串方法和属性:

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

原始值,比如“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

更多更详细的随机数方法

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,451评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,172评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,782评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,709评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,733评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,578评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,320评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,241评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,686评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,878评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,992评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,715评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,336评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,912评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,040评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,173评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,947评论 2 355

推荐阅读更多精彩内容