JS字符串常用方法-检索位置,截取,填充 对比ES5与ES6

11 阅读2分钟

1. 字符串检索 indexOf vs includes

String.indexOf(searchValue,fromIndex)

indexOf() 方法返回调用它的 String 对象中第一次出现的指定值的索引,从 fromIndex 处进行搜索。如果未找到该值,则返回 -1。区分大小写的,检测是否存在某字符串,直接用String.indexOf(searchValue) === -1来判断。

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';
const searchTerm = 'dog';

const indexOfFirst = paragraph.indexOf(searchTerm);
const indexOfNext = paragraph.indexOf(searchTerm,indexOfFirst+1);

console.log(indexOfFirst);  // 40
console.log(indexOfNext);  //  52


String.includes(searchValue,fromIndex)

它是一个在ES6中引入的方法,用于判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false。区分大小写的,语法与indexOf一致。

  • startsWith(searchValue, fromIndex):返回布尔值,表示参数字符串是否在原字符串的头部。
  • endsWith(searchValue, fromIndex):返回布尔值,表示参数字符串是否在原字符串的尾部。
'Blue Whale'.includes('blue'); // returns false

2. slice,substring,substr的区别

slice(start, end)

  • 它是一个在ES6中引入的方法,用于提取字符串的一部分,并返回一个新的字符串。
  • 它接受一个或两个参数,表示开始提取的位置和结束位置(不包括结束位置)。
  • 它可以使用负数参数,表示从字符串的末尾开始计数。
var str1 = 'The morning is upon us.', // str1 的长度 length 是 23。
    str2 = str1.slice(1, 8),
str2;   // 'he morn'
str1.slice(4, -2);   // 'morning is upon u'
str1.slice(12);   // 'is upon us.'
str1.slice(30);   // ""
str.slice(-3);     //  'us.'
str.slice(-3, -1); // 'us'
str.slice(0, -1);  // 'The morning is upon us'

substring(indexStart, indexEnd)

substring()与slice()一样的,只是第二个参数表示的是要截取的长度。用于截取尾部字符串很方便。

var anyString = 'Mozilla';
anyString.substring(anyString.length - 4);  // 'illa'

substr(from, length) 

  • 它是一个非标准的JavaScript方法,用于返回从指定位置开始的指定数量的字符组成的字符串。
  • 它接受两个参数:开始索引(从该索引开始提取字符)和要返回的长度。
  • 不推荐使用,因为它已被废弃,且不是ECMAScript标准的一部分。

3. 填充和替换

repeat(count)

重复字符串指定的次数。

"Hello".repeat(2)  //'HelloHello'

padStart(targetLength, padString)

用另一个字符串填充当前字符串,以便产生所需长度的新字符串。填充从当前字符串的开始(左侧)应用。

"1".padStart(3, "0")  // "001"

padEnd(targetLength, padString)

用另一个字符串填充当前字符串,以便产生所需长度的新字符串。填充从当前字符串的结束(右侧)应用。

"1".padEnd(3, "0")   // "100"

replace(searchValue, replaceValue)

替换字符串中匹配的子字符串。

"Hello World".replace("World", "JS"// 'Hello JS'