JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（三）

JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】（二）:https://developer.aliyun.com/article/1556672

字符串

字符串的常用方法

操作方法

增

这里增的意思并不是说直接增添内容，而是创建字符串的一个副本，再进行操作除了常用+以及${}进行字符串拼接之外，还可通过concat

concat()

let stringValue = "hello ";
let result = stringValue.concat("world");
console.log(result); // "hello world"
console.log(stringValue); // "hello "

删

这里的删的意思并不是说删除原字符串的内容，而是创建字符串的一个副本，再进行操作

常见的有：

• slice()
• substr()
• substring()
• 这些方法的主要区别在于参数的不同。

slice(startIndex, endIndex)方法根据指定的开始索引和结束索引来提取源字符串的子字符串。它返回从开始索引（包括）到结束索引（不包括）之间的字符。

示例：

let str = "Hello World";
let result = str.slice(0, 5);
console.log(result); // 输出："Hello"

如上，slice(0, 5)提取了字符串str从索引0开始到索引5之前的子字符串。

substr(startIndex, length)方法根据指定的开始索引和长度来提取源字符串的子字符串。它返回从开始索引位置开始并且具有指定长度的字符。

示例：

let str = "Hello World";
let result = str.substr(6, 5);
console.log(result); // 输出："World"

如上，substr(6, 5)提取了字符串str从索引6开始的5个字符的子字符串。

substring(startIndex, endIndex)方法根据指定的开始索引和结束索引来提取源字符串的子字符串。与slice()方法类似，它返回从开始索引（包括）到结束索引（不包括）之间的字符。

示例：

let str = "Hello World";
let result = str.substring(6, 11);
console.log(result); // 输出："World"

如上，substring(6, 11)提取了字符串str从索引6开始到索引11之前的子字符串。

slice()和substring()方法在大部分情况下是相似的，它们都是用来提取字符串中一段子串的。

它们的区别主要在于对负数索引的处理和对参数顺序的不同处理方式。

对负数索引的处理：

• slice(startIndex, endIndex)方法允许使用负数索引。当使用负数索引时，它们会从字符串的末尾开始计数。

示例：

let str = "Hello World";
let result = str.slice(-5, -1); // "Worl"

• substring(startIndex, endIndex)方法不支持负数索引，如果传入负数，它们会被视为0。

示例：

let str = "Hello World";
let result = str.substring(-5, -1); // "Hello"

2. 对参数顺序的处理：

• slice(startIndex, endIndex)方法会自动调整参数顺序，确保startIndex小于等于endIndex。

示例：

let str = "Hello World";
let result = str.slice(6, 2); // "llo "

• substring(startIndex, endIndex)方法不会自动调整参数顺序，如果startIndex大于endIndex，它们会被视为0。

示例：

let str = "Hello World";
let result = str.substring(6, 2); // " "

总结来说，slice()和substring()方法在常规用法下非常相似，它们都可以提取字符串的子串。但是在对负数索引和参数顺序处理上存在一些细微差别。

改

这里改的意思也不是改变原字符串，而是创建字符串的一个副本，再进行操作

常见的有：

• trim()、trimLeft()、trimRight()
• repeat()
• padStart()、padEnd()
• toLowerCase()、toUpperCase()

trim()、trimLeft()、trimRight()

删除前、后或前后所有空格符，再返回新的字符串

let stringValue = " hello world "
let trimStringValue() = stringValue.trim()
console.log(trimStringValue) // "hello world"

repeat()

接收一个整数参数，表示要将字符串复制多少次，然后返回拼接所有副本后的结果

let stringValue = "china "
let copyStringValue = stringValue.repeat(2)

padStart()、padEnd()

padStart()和padEnd()方法都用于将字符串填充到指定长度。

padStart()方法用于在字符串的开头添加空格或其他字符，以便使字符串达到指定的长度，如果原始字符串已经达到或超过指定的长度，则不进行任何操作。它接受两个参数，第一个参数表示目标长度，第二个参数表示用于填充字符串的字符，默认为空格。

以下是padStart()方法的使用示例：

let str = "Hello";
let result = str.padStart(10, "-");
console.log(result); // 输出："-----Hello"

在上述示例中，padStart(10, “-”)将在字符串str的开头添加5个"-"字符，以便使字符串达到10个字符的长度。

padEnd()方法用于在字符串的结尾添加空格或其他字符，以便使字符串达到指定的长度，如果原始字符串已经达到或超过指定的长度，则不进行任何操作。它接受两个参数，第一个参数表示目标长度，第二个参数表示用于填充字符串的字符，默认为空格。

以下是padEnd()方法的使用示例：

let str = "World";
let result = str.padEnd(10, "-");
console.log(result); // 输出："World-----"

在上述示例中，padEnd(10, “-”)将在字符串str的结尾添加5个"-"字符，以便使字符串达到10个字符的长度。

需要注意的是，如果用于填充字符串的字符长度超过要填充的长度，则会将其截取为指定长度。如果不传入第二个参数，则默认使用空格进行填充。

toLowerCase()、toUpperCase()

大小写转化

let stringValue = "hello World"
console.log(stringValue.toLowerCase()) // hello world
console.log(stringValue.toUpperCase()) // HELLO WORLD

查

除了通过索引的方式来获取字符串的值，还可以通过：

• charAt()
• indexOf()
• startWith()
• includes()

charAt()

charAt()方法用于返回给定索引位置的字符。它接受一个整数作为参数，该整数指定要返回字符的位置。索引位置从0开始，表示字符串中的第一个字符。

以下是charAt()方法的使用示例：

let str = "Hello World";
let char = str.charAt(4);
console.log(char); // 输出：o

如上，charAt(4)返回在字符串str中索引为4的字符，即字母"o"。

需要注意的是，如果给定的索引超出了字符串的范围，charAt()方法将返回一个空字符串。

let str = "Hello World";
let char = str.charAt(20);
console.log(char); // 输出：空字符串

如上，索引20超出了字符串str的范围，因此返回一个空字符串

indexOf()

indexOf()方法用于在字符串中搜索指定的子字符串，并返回该子字符串第一次出现的位置。如果没有找到该子字符串，则返回-1。

以下是indexOf()方法的使用示例：

let str = "Hello World";
let pos = str.indexOf("World");
console.log(pos); // 输出：6

如上，indexOf(“World”)在字符串str中搜索子字符串"World"，并返回该子字符串第一次出现的位置，即6。

需要注意的是，indexOf()方法区分大小写。如果要进行不区分大小写的搜索，请使用toLowerCase()或toUpperCase()先将字符串转换为小写或大写，再进行搜索。

let str = "Hello World";
let pos = str.indexOf("world");
console.log(pos); // 输出：-1，未找到

在上述示例中，由于"world"与"World"大小写不同，因此indexOf()方法未能找到该子字符串，返回-1。

startWith() 、includes()

startsWith()和includes()方法都用于在字符串中搜索指定的子字符串，并返回一个布尔值表示是否包含该子字符串。

startsWith()方法用于判断字符串是否以指定的子字符串开头。它接受一个字符串参数，用于指定要搜索的子字符串。如果原始字符串以该子字符串开头，则返回true，否则返回false。

以下是startsWith()方法的使用示例：

let str = "Hello World";
let result = str.startsWith("Hello");
console.log(result); // 输出：true

如上，startsWith(“Hello”)判断字符串str是否以"Hello"开头，并返回true，因为字符串str确实以"Hello"开头。

includes()方法用于判断字符串是否包含指定的子字符串。它接受一个字符串参数，用于指定要搜索的子字符串。如果原始字符串包含该子字符串，则返回true，否则返回false。

以下是includes()方法的使用示例：

let str = "Hello World";
let result = str.includes("World");
console.log(result); // 输出：true

如上，includes(“World”)判断字符串str是否包含"World"子字符串，并返回true，因为字符串str确实包含"World"子字符串。

需要注意的是，startsWith()和includes()方法都区分大小写。如果要进行不区分大小写的搜索，请使用toLowerCase()或toUpperCase()先将字符串转换为小写或大写，再进行搜索。

转换方法

split()

split() 是 JavaScript 字符串对象的一个方法，它用于将字符串按照指定的分隔符进行拆分，并返回一个由拆分后的子字符串组成的数组。

split() 方法接收一个参数，用于表示要使用的分隔符。该参数可以是一个字符串或正则表达式。如果传入的是一个字符串，字符串中的每个字符都会被视为分隔符，用于拆分字符串。如果传入的是一个正则表达式，则根据匹配到的模式来拆分字符串。

下面是一个使用 split() 方法的示例：

const str = 'The quick brown fox jumps over the lazy dog.';
const separator = ' ';

const arr = str.split(separator);
console.log(arr);  // [ 'The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog.' ]

如上，我们使用空格 ’ ’ 来作为分隔符，将字符串 str 拆分成了一个由单词组成的数组。split() 方法返回的数组为 [ ‘The’, ‘quick’, ‘brown’, ‘fox’, ‘jumps’, ‘over’, ‘the’, ‘lazy’, ‘dog.’ ]。

需要注意的是，如果传入的分隔符为空字符串 ‘’，则会将字符串拆分为每个字符一个元素的数组。如果传入的分隔符为 null 或没有传入参数，则返回包含整个字符串的数组。

练习split()

split() 方法非常灵活，可以根据需要选择不同的分隔符和参数。它可以帮助我们方便地处理字符串，并将其拆分为需要的部分。

一

const str1 = 'apple,banana,orange';
const str2 = '1 2 3 4 5';
const str3 = 'Hello,World!';
const str4 = 'apple|banana|orange';
const str5 = 'abcbdbbdbdbbdddbdbddbb';

// 使用逗号分隔字符串，生成数组
const arr1 = str1.split(',');
console.log(arr1);  // [ 'apple', 'banana', 'orange' ]

// 使用空格分隔字符串，生成数组
const arr2 = str2.split(' ');
console.log(arr2);  // [ '1', '2', '3', '4', '5' ]

// 使用正则表达式分隔字符串，生成数组
const arr3 = str3.split(/[,!]/);
console.log(arr3);  // [ 'Hello', 'World' ]

// 使用竖线分隔字符串，生成数组
const arr4 = str4.split('|');
console.log(arr4);  // [ 'apple', 'banana', 'orange' ]

// 不传入参数，默认将字符串拆分为每个字符一个元素的数组
const arr5 = str5.split();
console.log(arr5);  // [ 'a', 'b', 'c', 'b', 'd', 'b', 'd', 'b', 'd', 'b', 'b', 'd', 'd', 'b', 'd', 'b' ]

// 拆分指定次数，使用正则表达式拆分字符串
const arr6 = str5.split(/b/, 4);
console.log(arr6);  // [ 'a', 'c', 'dbd', 'd' ]

二

我们对一个字符串进行了多个操作：

1. 使用空格将字符串拆分为单词，并计算单词数量。
2. 统计每个单词的出现次数，并生成一个包含单词和频率的对象。
3. 使用正则表达式将字符串拆分为句子，并计算句子数量。
4. 查找包含特定单词的句子。
5. 将字符串拆分为字符数组，并逆序排列字符。
6. 使用 join() 方法将逆序排列的字符组合成字符串。

const text = 'Welcome to the JavaScript world! Keep learning and keep coding!';

// 将字符串拆分为单词，并计算单词数量
const words = text.split(' ');
const wordCount = words.length;
console.log('单词数量:', wordCount);  // 单词数量: 9

// 统计每个单词的出现次数
const wordFrequency = {};
words.forEach(word => {
  if (word in wordFrequency) {
    wordFrequency[word]++;
  } else {
    wordFrequency[word] = 1;
  }
});
console.log('单词频率:', wordFrequency);
/*
单词频率: {
  Welcome: 1,
  to: 1,
  the: 1,
  JavaScript: 1,
  world!: 1,
  Keep: 1,
  learning: 1,
  and: 1,
  coding!: 1
}
*/

// 将字符串拆分为句子，并计算句子数量
const sentences = text.split(/[.!?]/);
const sentenceCount = sentences.length;
console.log('句子数量:', sentenceCount);  // 句子数量: 2

// 查找包含特定单词的句子
const keyword = 'learning';
const sentencesWithKeyword = sentences.filter(sentence => sentence.toLowerCase().includes(keyword));
console.log('包含关键词 "', keyword, '" 的句子:', sentencesWithKeyword);
// 包含关键词 " learning " 的句子: [ ' Keep learning and keep coding' ]

// 拆分字符串为字符数组，并逆序排列字符
const characters = text.split('');
const reversedCharacters = characters.reverse();
const reversedText = reversedCharacters.join('');
console.log('逆序排列的字符串:', reversedText);
// 逆序排列的字符串: !gnidoc peek dna gninrael peeK .dlrow tpircSavaJ eht ot emocleW

模板匹配方法

针对正则表达式，字符串设计了几个方法:

• match()
• search()
• replace()

match()

match() 方法是 JavaScript 字符串对象的一个方法，它用于执行正则表达式匹配操作，并返回一个包含匹配结果的数组。

match() 方法接收一个参数，可以是一个正则表达式字符串或一个 RegExp 对象。如果参数是正则表达式字符串，则会隐式地创建一个 RegExp 对象来进行匹配。

match() 方法会返回一个数组，其中包含所有与正则表达式匹配的子字符串。如果没有匹配到任何内容，则返回 null。

下面是一个使用 match() 方法的示例：

const str = 'Hello, world!';
const pattern = /[A-Z]/g;

const matches = str.match(pattern);
console.log(matches);  // ['H']

如上，我们使用正则表达式 /[A-Z]/g 来匹配字符串 str 中的大写字母。match() 方法返回了一个数组，其中包含与正则表达式匹配的子字符串 ‘H’。

需要注意的是，如果正则表达式包含全局标志 g，则 match() 方法将返回所有匹配的子字符串组成的数组。如果正则表达式没有全局标志 g，则 match() 方法只返回第一个匹配项及其相关信息的数组。

search()

search() 方法是 JavaScript 字符串对象的一个方法，它用于在字符串中查找指定正则表达式的第一个匹配项，并返回匹配项的索引值。如果没有找到匹配项，则返回 -1。

search() 方法接收一个参数，可以是一个正则表达式字符串或一个 RegExp 对象。如果参数是一个字符串，则会被隐式地转换为一个正则表达式对象来进行匹配。

下面是一个使用 search() 方法的示例：

const str = 'The quick brown fox jumps over the lazy dog.';
const pattern = /brown/;

const index = str.search(pattern);
console.log(index);  // 10

如上，我们使用正则表达式 /brown/ 来查找字符串 str 中的 brown 子字符串。search() 方法返回了匹配项的索引值 10。

需要注意的是，如果正则表达式包含全局标志 g，则 search() 方法将忽略该标志，并始终只返回第一个匹配项的索引值。

replace()

replace() 方法是 JavaScript 字符串对象的一个方法，它用于在字符串中查找指定的模式并用另一个字符串或函数来替换它。该方法返回一个新的字符串，不改变原来的字符串。

replace() 方法接收两个参数，第一个参数可以是一个正则表达式或字符串，用于表示要替换的模式或文本。如果该参数是字符串，则只会替换第一个匹配项。如果该参数是一个正则表达式，且包含全局标志 g，则会替换所有匹配项。第二个参数可以是一个字符串或函数，用于表示要替换成的内容。

下面是一个使用 replace() 方法的示例：

const str = 'The quick brown fox jumps over the lazy dog.';
const pattern = /fox/;

const newStr = str.replace(pattern, 'cat');
console.log(newStr);  // 'The quick brown cat jumps over the lazy dog.'

如上，我们使用正则表达式 /fox/ 来查找字符串 str 中的 fox 子字符串，并使用字符串 ‘cat’ 来替换它。replace() 方法返回了一个新的字符串 ‘The quick brown cat jumps over the lazy dog.’。

需要注意的是，如果第二个参数是一个函数，则该函数将被调用来生成替换文本。该函数接收匹配到的子字符串、匹配项在字符串中的索引、以及原始字符串作为参数。函数应该返回一个用来替换匹配项的字符串。

小结

加油向未来