javaScript教程之JS常用字符串API汇总梳理

关于js字符串与js数组的一些说明:

  1. 字符串与数组有一定的相同之处,都可以通过length属性获取大小,都可以通过下标访问,都能用for循环遍历每个字符/元素
  2. 字符串与数组的不同之处,数组可以随意修改原数组,字符串是字符只读数组,一旦创建不可以修改

1.字符串拼接concat()、+、模板字符串

concat()函数:将多个字符串拼接成新字符串,返回新拼接的字符串
语法:var newStr = str.concat(string1,string2,…,stringx)

var str = "dream-";
var str1 = "starts";
var str2 = "-with-lighting-matches";
var newStr1 = str.concat();//没有参数功能等同复制字符串
var newStr2 = str.concat(str1);//将str与str1拼接返回
var newStr3 = str.concat(str1,str2); //将str与str1、str2拼接返回

console.log(newStr1)//dream-
console.log(newStr2);//dream-starts
console.log(newStr3);//dream-starts-with-lighting-matches

通过 + 拼接字符串
用法:var newStr = str + string1 + string2 +… +stringx

var str = "dream-";
var str1 = "starts";
var str2 = "-with-lighting-matches";
var newStr1 = str + str1;//将str与str1拼接
var newStr2 = str + str1 + str2; //将str与str1、str2拼接

console.log(newStr1);//dream-starts
console.log(newStr2);//dream-starts-with-lighting-matches

通过模板字符串拼接字符串ES6新增
用法:var newStr = ${string1}${string2}...${stringx}

//用法:var newStr = `${string1}${string2}...${stringx}`
var str = "dream";
var str1 = "starts";
var str2 = "with-lighting-matches";
var newStr1 = `${str}-${str1}`;//将str与str1拼接
var newStr2 = `${str}-${str1}-${str2}`; //将str与str1、str2拼接

console.log(newStr1);//dream-starts
console.log(newStr2);//dream-starts-with-lighting-matches

2.字符串选取substring()、substr()、slice()

substring()函数:选取两个指定索引之间的字符串,两个参数时遵循含头不含尾的原则,返回新选取的字符串
语法:var newStr = str.substring([starti [,endi]])
注意:substring会以较小参数作为起始位置,较大参数作为结束位置

var str = "dream-starts-with-lighting-matches";
var newStr1 = str.substring();//没有参数代表选取所有字符
var newStr2 = str.substring(5);//一个参数代表开始位置,选取从索引5开始开始到结束字符
var newStr3 = str.substring(5,10); //选取索引5到索引10之间的字符,不包括索引10
//以较小参数作为起始位置,较大参数作为结束位置
var newStr4 = str.substring(10,5); //选取索引5到索引10之间的字符,不包括索引10
console.log(newStr1)//dream-starts-with-lighting-matches
console.log(newStr2);//-starts-with-lighting-matches
console.log(newStr3);//-star
console.log(newStr4);//-star

substr()函数:选取从指定位置开始指定长度的字符串,返回新选取的字符串
语法:var newStr = str.substr([starti [,length]])

var str = "dream-starts-with-lighting-matches";
var newStr1 = str.substr();//没有参数代表选取所有字符
var newStr2 = str.substr(5);//一个参数代表开始位置,选取从索引位置5开始到结束字符
var newStr3 = str.substr(5,8);//从索引位置5开始选取8个字符
console.log(newStr1)//dream-starts-with-lighting-matches
console.log(newStr2);//-starts-with-lighting-matches
console.log(newStr3);//-starts-

slice()函数:选取两个指定索引之间的字符串,两个参数时遵循含头不含尾的原则,返回新选取的字符串
语法:var newStr = str.slice([starti [,endi]])

var str = "dream-starts-with-lighting-matches";
var newStr1 = str.slice();//没有参数代表选取所有字符
var newStr2 = str.slice(5);//一个参数代表开始位置,选取从索引5开始开始到结束字符
var newStr3 = str.slice(5,10); //选取索引5到索引10之间的字符,不包括索引10
console.log(newStr1)//dream-starts-with-lighting-matches
console.log(newStr2);//-starts-with-lighting-matches
console.log(newStr3);//-star

3.字符串查找indexOf()、lastIndexOf()、search()、match()、exec()

indexOf()函数:从头开始往后查找指定值,返回指定值出现的第一个索引,找不到返回-1
语法:var index = str.indexOf(searchvalue [,fromindex])

var str = "Good good good study, day day day up";
var  index1 = str.indexOf('good');
console.log(index1);//5
var  index2 = str.indexOf('good',6);
console.log(index2);//10
var  index3 = str.indexOf('No');
console.log(index3);//-1

lastIndexOf()函数:从字符串后面开始往前查找指定值,返回指定值出现的第一个索引,找不到返回-1
语法:var index = str.lastIndexOf(searchvalue [,fromindex])

var str = "Good good good study, day day day up";
var  index1 = str.lastIndexOf('good');
console.log(index1);//10
var  index2 = str.lastIndexOf('good',6);
console.log(index2);//5
var  index3 = str.lastIndexOf('good',3);
console.log(index3);//-1

search()函数:查找指定值/正则匹配的值在字符串中的位置,返回找到的第一个索引,找不到返回-1
语法:var index = str.search(regexp/searchvalue )

var str = "Good good good study, Day day day up";
var  index1 = str.search('good');
console.log(index1);//5
var  index2 = str.search('No');
console.log(index2);//-1

var  index3 = str.search(/good/);
console.log(index3);//5
var  index3 = str.search(/good/i);//根据正则查找,不区分大小写
console.log(index3);//0

match()函数:查找指定值/正则匹配的元素,返回值根据是否全局匹配(正则中是否有g标识)有所不同,没找到返回 null,具体如下:

  1. 参数为非正则或正则但是不全局匹配,返回一个数组,数组成员如下:
    第0个元素:匹配文本
    index:首次匹配到子字符串的位置
    input:原字符串
    groups:当前并不被支持

  2. 参数为正则全局匹配:返回所有匹的值组成的数组

语法:var arr= str.match(regexp/searchvalue )

var str = "Good good good study";
var  arr1 = str.match('good');
console.log(arr1);//["good", index: 5, input: "Good good good study", groups: undefined]
var  arr2= str.match('No');
console.log(arr2);//null

var  arr3= str.match(/good/);
console.log(arr3);//["good", index: 5, input: "Good good good study", groups: undefined]
var  arr4 = str.match(/good/g);//全局查找,区分大小写
console.log(arr4);//["good", "good"]
var  arr5 = str.match(/good/ig);//全局查找,不区分大小写
console.log(arr5);// ["Good", "good", "good"]
var  arr6 = str.match(/No/ig);//全局查找,不区分大小写
console.log(arr6);// null

exec()函数:查找正则匹配的元素,没找到返回 null, 找到返回新组成的数组,数组成员如下:

  • 第0个元素:匹配文本
  • index:首次匹配到子字符串的位置
  • input:原字符串
  • groups:当前并不被支持

正则是否全局匹配(是否有g标识)调用过程不同 正则对象中的lastIndex属性的值是用来控制检查字符开始的位置,如果是非全局匹配该值为零,若为全局匹配,该值为上一次找到字符串的尾部索引的下一位

语法:var arr = regexp.exec(str)

附:正则定义的两种方式

  1. var regexp = /pattern/modifiers;
  2. var regexp = new RegExp(pattern,modifiers);
  • modifiers(修饰符)说明:
    i:忽略大小写;
    g:全局匹配;
    m:多行匹配,当要检索的字符串为单行时,使用 m无意义
var str = "Good good good study";
var regexp1 = /good/
var  arr1 = regexp1.exec(str);
console.log(arr1);//["good", index: 5, input: "Good good good study", groups: undefined]

//var regexp2 = /good/g
var regexp2 = new RegExp(/good/,"g")
var arr2 = []
do {
  console.log(arr2)
  console.log(regexp2.lastIndex)
} while ((arr2 = regexp2 .exec(str)) != null)  

//do-while会循环输出3次,每次内容如下
//第一次
	//null
	//0
//第二次
	//["good", index: 5, input: "Good good good study", groups: undefined]
	//9
//第三次
	//["good", index: 10, input: "Good good good study", groups: undefined]
	//14

4.字符串替换replace()

replace()函数:将字符串中匹配的内容替换为新内容,返回替换后的字符串
语法:var newStr = str.replace(regexp/substr,replacement)

var str = "Good good good study, day day day up";
var newStr1 = str.replace('good','hard');//普通替换只替换第一个匹配的位置
var newStr2 = str.replace(/good/g,'hard');//利用正则全局查找替换,区分大小写
var newStr3 = str.replace(/good/ig,'hard');//利用正则全局查找替换,不区分大小写
var newStr4 = str.replace(/\s+/g,'');//去除空格

console.log(newStr1)//Good hard good study, day day day up
console.log(newStr2);//Good hard hard study, day day day up
console.log(newStr3);//hard hard hard study, day day day up
console.log(newStr4);//Goodgoodgoodstudy,daydaydayup

5.字符串分割为数组split()

split()函数:根据指定的分隔符将字符串分割为数组,返回分割字符串生成的数组
语法:var newArr = str.split(separator,howmany)

var str1 = "dream-starts-with-lighting-matches";
var newArr1 = str1.split('-');//将字符串根据'-'分割为数组
var newArr2 = str1.split('-', 3);//将字符串根据'-'分割为数组,只取前三个

console.log(newArr1)//["dream", "starts", "with", "lighting", "matches"]
console.log(newArr2);//["dream", "starts", "with"]

//拓展,split通常会和join配套使用
var str1 = "dream-starts-with-lighting-matches";
var newArr3 = str1.split('-');//将字符串根据'-'分割为数组
var str3 = newArr3.join('&')
console.log(newArr1)//["dream", "starts", "with", "lighting", "matches"]
console.log(str3)//dream&starts&with&lighting&matches

6.字符串大小写转换toLowerCase()、toUpperCase()

toLowerCase()函数:将字符串中的字符都转换为小写,返回转换后的字符串
语法:var newStr = str.toLowerCase()
toUpperCase()函数:将字符串中的字符都转换为大写,返回转换后的字符串
语法:var newStr = str.toUpperCase()

var str = "Good good study, Day day up";
var newStr1 = str.toLowerCase();
var newStr2 = str.toUpperCase();

console.log(newStr1)//good good study, day day up
console.log(newStr2);//GOOD GOOD STUDY, DAY DAY UP

7.获取指定位置的字符charAt()、字符编码值charCodeAt()

charAt()函数:获取字符串中指定位置/索引的字符,返回获取的字符
语法:var newChar = str.charAt(index)

charCodeAt()函数:获取字符串中指定位置/索引的字符编码,返回获取的字符编码
语法:var newCharCode = str.charCodeAt(index)

var str = "Good good study, Day day up";
var char1 = str.charAt(0);
var char2 = str.charAt(5);
var charCode1 = str.charCodeAt(0);
var charCode2 = str.charCodeAt(5);
console.log(char1)//G
console.log(char2);//g
console.log(charCode1);//71 字符G的ASCII码
console.log(charCode2);//103 字符g的ASCII码
  • 5
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值