辟邪剑法之字符串常用API

辟邪剑法之字符串常用API

一.引言

之前的博客中,有总结过常用的数组方法,独孤九剑之数组方法

那操作字符串的,为什么要我要称之为辟邪剑法?据我以往的工作经验,我们用的最多的字符串方法,无外乎一个"割"字,基本上都是分割字符串,下面我们来介绍下常用的字符串方法.

二.字符串

1.字符串介绍

JavaScript的字符串就是用单引号'' 或 双引号"" 括起来的字符

字符串之间使用 + 号拼接

创建字符串的方式

• var str1='123456' 通常使用这种方式创建
• var str2 = new String('123456')

属性length 返回字符串的长度

比如:str1.length; //6,我们也可以根据索引返回字符串中的某个字符串str1[0], str1[1]

2.ES5字符串方法

1.toLowerCase()

将整个字符串转成小写字母

var str1="ABcdefGHIG";
console.log(str1.toLowerCase());//abcdefghig

2.toUpperCase()

将整个字符串转成大写字母

var str1="ABcdefGHIG";
console.log(str1.toUpperCase());//ABCDEFGHIG

3.indexOf()

返回字符串中子串第一处出现的索引值,没有匹配返回-1

var str1="ABcdefGHIG";
console.log(str1.indexOf('d'));//3
console.log(str1.indexOf('k'));//-1

4.lastIndexOf()

返回字符串中子串最后出现的索引值,没有匹配返回-1

var str1="liuqiaoqiao";
console.log(str1.lastIndexOf('i'));//8
console.log(str1.lastIndexOf('k'));//-1

5.slice()

从已有字符串中提取部分字符,返回新的字符串

var str = str1.slice(start,end)

slice()返回的子串包括start处的字符,但不包括end处的字符

var str1 = "撸起袖子加油干";
//slice()返回的子串包括start处的字符,但不包括end处的字符
console.log(str1.slice(4,6));//加油

6.split()

把一个字符串分割成字符串数组,返回新的数组 (也可以通过正则分割)

var str = str1.split('分割符',length)

第一个参数指定分割的符号

第二个参数可选,为返回数组的长度

var str1 = "liuqiao,zhangsan,xiaoming,xiaohong";
console.log(str1.split(','));//["liuqiao", "zhangsan", "xiaoming", "xiaohong"]
console.log(str1.split(',', 2));//["liuqiao", "zhangsan"]

//正则分割字符串
var str = "how are Are ARE you";
var box = /are/i;
var arr = str.split(box);
console.log(arr); //["how ", " ", " ", " you"]

ps:第二个参数如果大于分割后的数组长度,以最大数组长度的结果返回

7.substr()

返回一个从指定位置开始的指定长度的子串

var str = str1.substr(start,length)

参数start必须,字符串的起始位置,length参数可选,截取字符串的长度

var str1 = "撸起袖子加油干";
console.log(str1.substr(4,2));//加油

8.substring()

返回字符串中介于两个指定下标之间的子串

var str = str1.substring(start,end);

包含start处的字符，不包含end处的字符

var str1 = "撸起袖子加油干";
//包含start处的字符，不包含end处的字符
console.log(str1.substring(4,6));//加油

9.concat()

将两个或多个字符串组合起来,返回一个新的字符串

var str1 = "撸起";
var str2 = "袖子";
var str3 = "加油干";
console.log(str1.concat(str2, str3)); //撸起袖子加油干
console.log(str1 + str2 + str3); //撸起袖子加油干

ps: 一般拼接字符串我们不会使用这种方法,通过+连接难道不香吗?

10.charAt()

返回指定索引位置的字符

var str1 = "撸起袖子加油干";
console.log(str1.charAt(4));//加

11.charCodeAt()

指定索引处字符的编码值(ASCII)

var ascii = str.charCodeAt(index); // 默认为0

var str1 = "aA0Zz";
console.log(str1.charCodeAt());//97  默认为0
console.log(str1.charCodeAt(1));//65
console.log(str1.charCodeAt(2));//48

12.String.fromCharCode()

根据指定编码值,来返回字符串

String.fromCharCode(num1,num2,num3......)

console.log(String.fromCharCode(97, 65, 48)); //aA0
console.log(String.fromCharCode(65, 66, 67));//ABC

13.search()

search()方法匹配成功返回字符在字符串中首次匹配项的索引,否则返回-1

var newStr = str.search('abc');

var str1 = "ABcdefGHIG";
console.log(str1.indexOf('def'));//3
console.log(str1.search('d'));//3
console.log(str1.search('k'));//-1
console.log(str1.search(/e/));//4

PS:search()方法与indexOf()功能类似,都是返回目标字符串的索引值的,但是search()的参数可以是需要检索的子串,也可以是需要检索的正则表达式

二者可以区别使用:

• 当只是需要检索一个字符串时,可以使用indexOf(),系统资源消耗更小,效率更高.
• 当要查找某些特征的字符串(例如查找以a开头,后面都是数字的字符串)indexOf()无法办到,此时就要考虑使用search()和正则了

通常我们使用时,并不是为了知道该子串在字符串中的具体位置,而是为了判断子串是否存在于这个字符串中,如果不存在则返回-1,如果存在,则返回相应位置索引

14.replace()

用于在字符串中用一些字符替换另外一些字符,返回替换后的字符串

var newStr = str.replace('abc','替换abc');

var newStr = str.replace('敏感字', function (str){ ... return '**'; })

var str1 = "撸起袖子加油干,好好加油!";
console.log(str1.replace('加油', '就是'));//撸起袖子就是干,好好加油!
//正则
console.log(str1.replace(/加油/, '就是'));//撸起袖子就是干,好好加油!
//全局替换
console.log(str1.replace(/加油/g, '就是'));//撸起袖子就是干,好好就是!
console.log(
    str1.replace(/加油/g, function (str) {
      return "**";
	})
);  //撸起袖子**干,好好**!

PS:一般我们会用于替换某些敏感字符,或者只是单纯的替换文本,第一个参数可以是字符串,也可以是正则表达式

15.match()

在字符串中匹配某个正则是否存在

返回值:如果存在,返回一个数组,数组放着匹配到的子串,如果不存在,返回null

var str = "how are Are ARE you";
var reg = /are/ig;
console.log(str.match(reg)); //["are", "Are", "ARE"]

16.trim()

去除首位空格

var str1="   abc    de  ";
console.log(str1.trim());//abc    de

17.toString()

转为字符串

这个toString()有很多种用法,但是不能转null和undefined

• 强制转换

var num=123456;
console.log(num.toString());//123456
console.log(true.toString( )); // 'true'
console.log((123).toString( )); // '123'

• 进制间的转换

  在javaScript中进制之间的转换提供了两个非常好用的方法：toString()、parseInt()。

  //使用 toString() 方法把十进制转为其他进制：
  var x = 28;// 10进制
  console.log(x.toString(2)); //把十进转为2进制  11100
  console.log(x.toString(8));//把十进转为8进制   34
  console.log(x.toString(16));//把十进转为16进制 1c
  
  //使用 parseInt() 方法把其他进制转为十进制：
  var x = "110";//二进制的字符串
  console.log(parseInt(x, 2));//把这个字符串当做二进制，转为十进制  6
  var x = "070";//八进制的字符串
  console.log(parseInt(x, 8));//把这个字符串当做八进制，转为十进制  56
  var x = "0x1c";//十六进制的字符串
  console.log(parseInt(x, 16));//把这个字符串当做十六进制，转为十进制  28
  

  18.String()

  强制转为字符串,所有值都能转

  console.log(String(null));//"null"
  console.log(String(undefined));//"undefined"
  console.log(String(true));//"true"
  console.log(String(123));//"123"
  

3.ES6字符串方法

1.includes()

返回布尔值,表示是否找到了参数字符串

var str1 = "liuqiao";
console.log(str1.includes('qiao'));//true
console.log(str1.includes());  //false

2.startsWith()

返回布尔值,表示参数字符串是否在原字符串的头部

var str1 = "liuqiao";
console.log(str1.startsWith('liu'));//true
console.log(str1.startsWith('qiao'));  //false

3.endsWith()

返回布尔值,表示参数字符串是否存在源字符串的尾部

var str1 = "liuqiao";
console.log(str1.endsWith('liu'));//false
console.log(str1.endsWith('qiao'));  //true

4.includes(),startsWith(),endsWith()

此三种方法都支持第二个参数,表示开始搜索的位置

var str1 = "liuqiao";
console.log(str1.includes('qiao',3));//true
console.log(str1.startsWith('qiao',3));//true
console.log(str1.endsWith('qiao',3));//false

console.log(str1.endsWith('liu',3));//true

PS:上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

5.repeat()

表示将原字符串重复n次

console.log("liu".repeat(3));//"liuliuliu"
//默认为0
console.log("liu".repeat());//""
console.log("liu".repeat(0));//""
//如果是小数,则取整
console.log("liu".repeat(2.6));//"liuliu"

6.padStart,padEnd()

这是ES2017引入的字符串补全长度的功能.如果某个字符串不够指定长度,会在头部或尾部补全.

padStart()用于头部补全

padEnd()用于尾部补全

console.log(`qiao`.padStart(9,'liu'));//liuliqiao
console.log(`qiao`.padEnd(9,'liu'));//qiaoliuli

上面代码中，padStart()和padEnd()一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。

如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。

console.log('abc'.padStart(10, '0123456789'));// '0123456abc'

padStart()常见用法:

• 为数值补全指定位数

  '1'.padStart(10, '0') // "0000000001"
  '12'.padStart(10, '0') // "0000000012"
  '123456'.padStart(10, '0') // "0000123456"
  

• 解决时间格式不足两位补齐的问题

  var month = 9;
  //padStart(2,'0') 将转换成字符串的'9',不够两位时,前面加个0,输出就是09,解决日期如:2020-09-22的问题
  var newMonth = month.toString().padStart(2, '0');
  //输出09
  console.log(newMonth);
  

7.trimStart()、trimEnd()

ES2019对字符串新增的去除首,尾空格的方法,与trim()效果差不多

trimStart() 去除头部空格

trimEnd() 去除尾部空格

var str1 = "   abc    de  ";
console.log(str1.trim());//'abc    de'
console.log(str1.trimStart());//'abc    de  '
console.log(str1.trimEnd());//'   abc    de'

4.遍历字符串方法

1.for…of

除了遍历字符串，这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。

for (let i of "abc") {
   console.log(i);//依次打印  a    b    c
}

2.for()

var str1 = "abc";
for (let index = 0; index < str1.length; index++) {
   console.log(str1[index]);//依次打印  a    b    c
}