JS学习笔记——JavaScript中字符串的常用方法和基本使用

在上篇的文章中，我简单的将JavaScript中数组的方法进行了总结，这些内容对工作或者面试都有用，同时自己也有许多收获，这篇我们就对JavaScript中字符串的常用方法和使用进行总结

1、slice

• 语法：字符串.slice(start,end)
• 参数：
  start(必填)：表示开始截取的索引位置(可以为负数)
  end(可选)：表示结束截取的索引位置（如果第二个参数不存在，则表示截取到字符串末尾）(可以为负数)

【 注：包前不包后】

• 功能：提取字符串的某个部分
• 返回值：返回被提取的新的字符串
• 是否改变原字符串：否

var str1 = '我是一个漂亮美丽聪明的孩子'
var str2 = str1.slice(5)

console.log('str1',str1)   我是一个漂亮美丽聪明的孩子
console.log('str2',str2)   亮美丽聪明的孩子 

var str1 = '我是一个漂亮美丽聪明的孩子'
var str2 = str1.slice(5,8)

console.log('str1',str1)   我是一个漂亮美丽聪明的孩子
console.log('str2',str2)   亮美丽 //

注意：

• 如果start或者end是负数，那么它规定的是从字符串的尾部开始算起的位置

var str1 = '123abc我爱你'
var str2 = str1.slice(-7,-3)

console.log('str1',str1)   123abc我爱你
console.log('str2',str2)   3abc

2、indexOf

• 语法：字符串.indexOf(searchvalue,start)
• 参数：
  searchvalue(必填)：要检索的字符串值
  start(可选)：在字符串中开始检索的下标位置（如果该参数不存在，则默认从字符串首字符，即下标0开始)
• 功能：用于检索某个指定的字符串值在字符串中首次出现的下标位置
• 返回值：返回指定字符串第一次出现的下标位置；如果没找到匹配的字符串则返回 -1
• 是否改变原字符串：否

var str1 = '我是一个漂亮美丽聪明的孩子'
var str2 = str1.indexOf('美丽')

 console.log('str1',str1)   我是一个漂亮美丽聪明的孩子
 console.log('str2',str2)   6

var str1 = '你爱我，我爱你，我们爱着彼此'
var str2 = str1.indexOf('爱',6)

console.log('str1',str1)    你爱我，我爱你，我们爱着彼此
console.log('str2',str2)    10

注意：

• indexOf()方法对大小写敏感

3、lastIndexOf

和indexOf用法大概相同，不过lastindexOf是返回一个指定的字符串值最后出现的下标位置，在一个字符串中的指定位置从后向前搜索(可以理解为从右到左)

• 语法：字符串.lastIndexOf(searchvalue,start)
• 参数：
  searchvalue(必填)：要检索的字符串值
  start(可选)：在字符串中开始检索的下标位置（如果该参数不存在，则默认从字符串末尾)
• 功能：用于检索某个指定的字符串值在字符串中最后出现的下标位置，在一个字符串中的指定位置 start 处从后向前搜索
• 返回值：返回指定字符串最后一次出现的下标位置（该索引仍是以从左至右0开始记数的）；如果没找到匹配的字符串则返回 -1
• 是否改变原字符串：否

var str1 = '你爱我，我爱你，我们爱着彼此'
var str2 = str1.lastIndexOf('爱')

console.log('str1',str1)     你爱我，我爱你，我们爱着彼此
console.log('str2',str2)     10

var str1 = '你爱我，我爱你，我们爱着彼此'
var str2 = str1.lastIndexOf('爱',3)

console.log('str1',str1)    你爱我，我爱你，我们爱着彼此
console.log('str2',str2)    1

'canal'.lastIndexOf('a');     // returns 3 （没有指明start则从末尾l处开始反向检索到的第一个a出现在l的后面，即index为3的位置）
'canal'.lastIndexOf('a', 2);  // returns 1（指明start为2则从n处反向向回检索到其后面就是a，即index为1的位置）
'canal'.lastIndexOf('a', 0);  // returns -1(指明start为0则从c处向左回向检索a发现没有，故返回-1)
'canal'.lastIndexOf('x');     // returns -1
'canal'.lastIndexOf('c', -5); // returns 0（指明start为-5则视同0，从c处向左回向查找发现自己就是，故返回0）
'canal'.lastIndexOf('c', 0);  // returns 0（指明start为0则从c处向左回向查找c发现自己就是，故返回自己的索引0）
'canal'.lastIndexOf('');      // returns 5
'canal'.lastIndexOf('', 2);   // returns 2

注意：

• lastIndexOf()方法对大小写敏感

4、concat

• 语法：字符串.concat()
• 参数：要合并连接的字符串
• 功能：用于连接两个或多个字符串
• 返回值：返回由两个或多个字符串连接后的新字符串
• 是否改变原字符串：否

var str1 = 'abc'
var str2 = str1.concat('我爱你')

console.log('str1',str1)  abc  //不改变原字符串
console.log('str2',str2)  abc我爱你

5、toLowerCase

• 语法：字符串.toLowerCase()
• 参数：无
• 功能：将字符串转换成小写
• 返回值：转换后的小写字符串
• 是否改变原字符串：否

var str1 = 'ABC我爱你'
var str2 = str1.toLowerCase()

console.log('str1',str1)     ABC我爱你
console.log('str2',str2)     abc我爱你

6、toUpperCase

• 语法：字符串.toUpperCase()
• 参数：无
• 功能：将字符串转换成大写
• 返回值：转换后的大写字符串
• 是否改变原字符串：否

var str1 = 'abc我爱你'
var str2 = str1.toLowerCase()

console.log('str1',str1)     abc我爱你
console.log('str2',str2)     ABC我爱你

7、charAt

• 语法：字符串.charAt(index)
• 参数：指定位置下标
• 功能：返回指定下标位置的字符
• 返回值：指定位置的字符
• 是否改变原字符串：否

var str1 = 'abc我爱你'
var str2 = str1.charAt(3)

console.log('str1',str1)   abc我爱你  // 不改变原字符串
console.log('str2',str2)   我

var str1 = 'abc我爱你'
var str2 = str1.charAt(9)

console.log('str1',str1)   abc我爱你  // 不改变原字符串
console.log('str2',str2)   

注意：

• 如果index不在0-str.length(不包含str.length)之间，返回空字符串

8、charCodeAt

• 语法：字符串.charCodeAt(index)
• 参数：指定位置下标
• 功能：返回指定位置的字符的 Unicode 编码，返回值是 0 - 65535 之间的整数
• 返回值：Unicode 编码
• 是否改变原字符串：否

var str1 = 'abc我爱你'
var str2 = str1.charCodeAt(3)

console.log('str1',str1)   abc我爱你  // 不改变原字符串
console.log('str2',str2)   25105

var str1 = 'abc我爱你'
var str2 = str1.charCodeAt(9)

console.log('str1',str1)   abc我爱你  // 不改变原字符串
console.log('str2',str2)   NAN

注意：

• 如果index不在0-str.length(不包含str.length)之间，返回NAN

9、substring

• 语法：字符串.substring(from,to)
• 参数：
  from(必填)：表示开始截取的索引位置(不能为负数)
  to(可选)：表示结束截取的索引位置（如果第二个参数不存在，则表示截取到字符串末尾）(不能是负数)

【 注：包前不包后】

• 功能：提取字符串的某个部分
• 返回值：返回被提取的新的字符串
• 是否改变原字符串：否

var str1 = '123abc我爱你'
var str2 = str1.substring(3)

console.log('str1',str1)     123abc我爱你
console.log('str2',str2)     abc我爱你

var str1 = '123abc我爱你'
var str2 = str1.substring(3,7)

console.log('str1',str1)     123abc我爱你
console.log('str2',str2)     abc我

var str1 = '123abc我爱你'
var str2 = str1.substring(-7,-3)

console.log('str1',str1)     123abc我爱你
console.log('str2',str2)    

注意：
substring() 和 slice() 方法用法差不多，都是从一个字符串中截取出一段字符串，区别是：slice()的参数可以是负数，substring()的参数不能是负数

10、split

• 语法：字符串.split(separator,limit)

• 参数：
  separator(可选)：用于分割的字符串或正则表达式（如果原字符串没找到该分隔符，就直接返回该字符串数组）
  limit(可选)：指定返回的数组的最大长度

• 功能：把一个字符串分割成字符串数组

• 返回值：一个字符串数组

• 是否改变原字符串：否

var str1 = '121231abc'
var str2 = str1.split()
var str3 = str1.split("")
var str4 = str1.split(" ")

console.log('str1',str1)  '121231abc'
console.log('str2',str2)  ['121231abc']
console.log('str3',str3)  ['1', '2', '1', '2', '3', '1', 'a', 'b', 'c']
console.log('str4',str4)  ['121231abc']

var str1 = '121231abc111def'
var str2 = str1.split(1)
var str3 = str1.split(1,4)

console.log('str1',str1) '121231abc111def'
console.log('str2',str2) ['', '2', '23', 'abc', '', '', 'def']
console.log('str3',str3) ['', '2', '23', 'abc']

注意：

• 如果把空字符串 ("") 用作 separator，那么原字符串中每个字符之间都会被分割
• 返回的数组是以 separator 为边界进行分割，返回的数组中的字串不包括 separator 自身

11、replace

• 语法：字符串.replace(searchvalue,newvalue)

• 参数：
  searchvalue(必须)：要被替换掉的子字符串或RegExp 对象
  newvalue(必须)：用来做替换的新字符串值

• 功能：用一些字符替换字符串中另一些字符，或替换一个与正则表达式匹配的子串`

• 返回值：替换后的新的字符串

• 是否改变原字符串：否

var str1 = '12ab11AABB'
var str2 = str1.replace(1)
var str3 = str1.replace(1,'*')
var str4 = str1.replace(/1/g,'*')  //1为要替换的关键字，不能加引号，否则替换不生效

console.log('str1',str1)  '12ab11AABB'
console.log('str2',str2)   undefined2ab11AABB
console.log('str3',str3)   *2ab11AABB
console.log('str4',str4)   *2ab**AABB

/i/g 中的i为要替换的关键字，不能加引号，否则不生效，i忽略大小写，g表示全局查找

var str1 = 'niHAO SHIjie'
var str2 = str1.replace("i","*")
var str3 = str1.replace(/i/g,'*')
var str4 = str1.replace(/i/ig,"*")

console.log('str1',str1)  niHAO SHIjie
console.log('str2',str2)  n*HAO SHIjie
console.log('str3',str3)  n*HAO SHIj*e
console.log('str4',str4)  n*HAO SH*j*e

注意：

• 如果没有全局声明，仅第一个匹配项会被替换

12、match

• 语法：字符串.match(regexp)

• 参数：regexp(必须)：规定要匹配的模式的 RegExp 对象（如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象）

• 功能：在字符串中检索指定的值，返回所有查找的关键字内容的数组

• 返回值：存放匹配结果的数组（

• 是否改变原字符串：否

var str1 = "we ARE happy,WE ARE very HAPPY,we are family"
var str2 = str1.match(/are/)
var str3 = str1.match(/are/g)
var str4 = str1.match(/are/ig)
var str5 = str1.match(/ae/ig)

console.log('str1',str1)   "we ARE happy,WE ARE very HAPPY,we are family"
console.log('str2',str2)  ['are', index: 34, input: 'we ARE happy,WE ARE very HAPPY,we are family', groups: undefined]
console.log('str3',str3)  ['are']
console.log('str4',str4)  ['ARE', 'ARE', 'are']
console.log('str5',str5)  null

注意：

• 返回数组的内容依赖于 regexp 是否具有全局标志 g
• 如果使用g标志，则将返回与完整正则表达式匹配的所有结果，但不会返回捕获组
• 如果未使用g标志，则仅返回第一个完整匹配及其相关的捕获组（Array），改捕获组具有如下所述的其他属性
• 如果没找到匹配结果返回 null

13、substr()

警告- - - -MDN： 尽管 String.prototype.substr(…) 没有严格被废弃 (as in “removed from the Web standards”), 但它被认作是遗留的函数并且可以的话应该避免使用。它并非JavaScript核心语言的一部分，未来将可能会被移除掉。如果可以的话，使用 substring()替代它。

• 语法：字符串.substr(start,length)

• 参数：
  start(必须)：开始截取的子串的起始下标（必须是数值。可以是负数，如果是负数，那么该参数声明从字符串的尾部开始算起的位置）
  length(可选)：截取的字符数（即截取长度）

• 功能：在字符串中从指定下标开始截取指定长度的字符串

• 返回值：返回被提取的新的字符串

• 是否改变原字符串：否

 var str1 = "123abc123ABC"
var str2 = str1.substr(5)
var str3 = str1.substr(5,3)
var str4 = str1.substr(5,9)

console.log('str1',str1)  123abc123ABC
console.log('str2',str2)  c123ABC
console.log('str3',str3)  c12
console.log('str4',str4)  c123ABC

var str = "abcdefghij";

console.log("(1,2): "    + str.substr(1,2));   // (1,2): bc
console.log("(-3,2): "   + str.substr(-3,2));  // (-3,2): hi
console.log("(-3): "     + str.substr(-3));    // (-3): hij
console.log("(1): "      + str.substr(1));     // (1): bcdefghij
console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
console.log("(20, 2): "  + str.substr(20,2));  // (20, 2):

注意：

• start 是一个字符的索引。首字符的索引为 0，最后一个字符的索引为字符串的长度length减去1。substr 从 start 位置开始提取字符，提取 length 个字符（或直到字符串的末尾）
• 如果 start 为正值，且大于或等于字符串的长度，则 substr 返回一个空字符串
• 如果 start 为负值，则 substr 把它作为从字符串末尾开始的一个字符索引。如果 start 为负值且 abs(start) 大于字符串的长度，则 substr 使用 0 作为开始提取的索引
• 如果 length 为 0或负值，则 substr 返回一个空字符串
• 如果忽略 length，则 substr 提取字符，直到字符串末尾