JavaScript 系列之字符串（二）

鱼酱
747 阅读6分钟

这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战

二、截取拼接

2.1 concat

concat() 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。

str.concat(str2, [, ...strN])

  • @params：需要连接到 str 的字符串。
  • @return：一个新的字符串，包含参数所提供的连接字符串。
  • 是否改变原字符串：不改变
let hello = 'Hello, '
console.log(hello.concat('Kevin', '. Have a nice day.'))
// Hello, Kevin. Have a nice day.

let greetList = ['Hello', ' ', 'Venkat', '!']
console.log(''.concat(...greetList))  // 'Hello Venkat!'
console.log(''.concat({}))    // [object Object]
console.log(''.concat([]))    // ''
console.log(''.concat(null))  // 'null'
console.log(''.concat(true))  // 'true'
console.log(''.concat(4, 5))  // '45'

2.2 slice

slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。

str.slice(beginIndex[, endIndex])

  • @params：
    • beginIndex：从该索引（以 0 为基数）处开始提取原字符串中的字符。如果值为负数，会被当做 strLength + beginIndex 看待，这里的strLength 是字符串的长度（例如， 如果 beginIndex 是 -3 则看作是：strLength - 3）；
    • endIndex：可选。在该索引（以 0 为基数）处结束提取字符串。如果省略该参数，slice() 会一直提取到字符串末尾。如果该参数为负数，则被看作是 strLength + endIndex，这里的 strLength 就是字符串的长度(例如，如果 endIndex 是 -3，则是, strLength - 3)。
  • @return：返回一个从原字符串中提取出来的新字符串。
  • 是否改变原字符串：不改变
let str1 = 'The morning is upon us.', // str1 的长度 length 是 23。
    str2 = str1.slice(1, 8),
    str3 = str1.slice(4, -2),
    str4 = str1.slice(12),
    str5 = str1.slice(30);
console.log(str2); // 输出：he morn
console.log(str3); // 输出：morning is upon u
console.log(str4); // 输出：is upon us.
console.log(str5); // 输出：""

2.3 substr

substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。(如果可以的话，使用 substring() 替代它)

str.substr(start[, length])

  • @params：
    • start：开始提取字符的位置。如果为负值，则被看作 strLength + start，其中 strLength 为字符串的长度（例如，如果 start 为 -3，则被看作 strLength + (-3)）。
    • length：可选，提取的字符数。
  • @return：一个字符串中从指定位置开始到指定字符数的字符。
  • 是否改变原字符串：不改变
let 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):

2.4 substring

substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。

str.substring(indexStart[, indexEnd])

  • @params：
    • indexStart：需要截取的第一个字符的索引，该索引位置的字符作为返回的字符串的首字母。
    • indexEnd：可选，一个 0 到字符串长度之间的整数，以该数字为索引的字符不包含在截取的字符串内。
  • @return：包含给定字符串的指定部分的新字符串。
  • 是否改变原字符串：不改变
let str = 'Mozilla';

// 输出 'Moz'
console.log(str.substring(0,3));
console.log(str.substring(3,0));
console.log(str.substring(3,-3));
console.log(str.substring(3,NaN));
console.log(str.substring(-2,3));
console.log(str.substring(NaN,3));

// 输出 'lla'
console.log(str.substring(4,7));
console.log(str.substring(7,4));

// 输出 ''
console.log(str.substring(4,4));

// 输出 'Mozill'
console.log(str.substring(0,6));

// 输出 'Mozilla'
console.log(str.substring(0,7));
console.log(str.substring(0,10));

slice、substr、substring 的区别

  • 都接收两个参数
  • slice 和 substring 接收的是起始位置和结束位置(不包括结束位置)
  • substr 接收的则是起始位置和所要返回的字符串长度
let test = 'hello world';

console.log(test.slice(4,7));  //o w
console.log(test.substring(4,7));  //o w
console.log(test.substr(4,7));  //o world

⚠️注意：substring 是以两个参数中较小一个作为起始位置，较大的参数作为结束位置

console.log(test.substring(7,4));  //o w

当接收的参数是负数时：

  • slice 会将它字符串的长度与对应的负数相加，结果作为参数。
  • substring 则干脆将负参数都直接转换为0。
  • substr 则仅仅是将第一个参数与字符串长度相加后的结果作为第一个参数。
let test = 'hello world';

console.log(test.slice(-3));         //rld
console.log(test.substring(-3));     //hello world
console.log(test.substr(-3));        //rld
console.log(test.slice(3, -4));       //lo w
console.log(test.substring(3, -4));   //hel
console.log(test.substr(3, -4));      //空字符串

2.5 replace

replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果 pattern 是字符串，则仅替换第一个匹配项。

str.replace(regexp|substr, newSubStr|function)

  • @params：
    • regexp (pattern)：一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。在进行全局的搜索替换时，正则表达式需包含 g 标志。
    • substr (pattern):一个要被 newSubStr 替换的字符串。其被视为一整个字符串，而不是一个正则表达式。仅仅是第一个匹配会被替换。
    • newSubStr (replacement):用于替换掉第一个参数在原字符串中的匹配部分的字符串。该字符串中可以内插一些特殊的变量名。
    • function (replacement):一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。
  • @return：一个部分或全部匹配由替代模式所取代的新的字符串。
  • 是否改变原字符串：不改变

利用 replace() 进行替换的时候，如果传入的是字符串，则只会替换第一个子字符串，要想替换所有的子字符串，则需要传入一个正则表达式，而且要指定全局（g）标志。

let text = 'cat , bat , sat , fat';
let result = text.replace('at','ond');
console.log(result); // =>'cont , bat , sat , fat'

result = text.replace(/at/g,'ond');
console.log(result); //=>'cont , bont , sont , font'

当第二个参数为函数时函数的返回值作为替换字符串。与第二个参数是字符串一样，如果第一个参数是正则表达式，并且全局匹配，则这个函数的方法将被多次调用，每次匹配都会被调用。

function replacer(match, p1, p2, p3, offset, string) {
  // p1 is nondigits, p2 digits, and p3 non-alphanumerics
  return [p1, p2, p3].join(' - ');
}
let newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString);  // abc - 12345 - #$*%

2.6 replaceAll

replaceAll() 方法返回一个新字符串，新字符串所有满足 pattern 的部分都已被replacement 替换。pattern可以是一个字符串或一个 RegExp， replacement可以是一个字符串或一个在每次匹配被调用的函数。

const newStr = str.replaceAll(regexp|substr, newSubstr|function)

  • @params：
  • @return：一个全部匹配由替代模式所取代的新的字符串。
  • 是否改变原字符串：不改变
'aabbcc'.replaceAll('b', '.');
// 'aa..cc'

2.7 repeat

repeat() 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。

str.repeat(count)

  • @params：介于 0 和 +Infinity 之间的整数。表示在新构造的字符串中重复了多少遍原字符串。
  • @return： 包含指定字符串的指定数量副本的新字符串。
  • 是否改变原字符串：不改变
'abc'.repeat(-1)  // RangeError: repeat count must be positive and less than inifinity
'abc'.repeat(0)   // ''
'abc'.repeat(1)   // 'abc'
'abc'.repeat(2)   // 'abcabc'
'abc'.repeat(3.5) // 'abcabcabc' 参数count将会被自动转换成整数.
'abc'.repeat(1/0) // RangeError: repeat count must be positive and less than inifinity
avatar
文章
阅读
粉丝