前端基础

29 01月

复习前端：JavaScript 字符串操作方法

2023-01-29 前端基础

复习前端：JavaScript 字符串操作方法

字符串是每种编程语言的基本组成部分，而 JavaScript 具有许多强大的内置函数，可以让开发人员轻松处理字符串。

includes

includes 方法确定子字符串是否包含在较大的字符串中并返回 true 或者 false。常用于搜索/解析的字符串是否匹配。

const arrayAuthors = ["DevPoint", "DevelopPoint"];
const author = "DevPoint";
console.log([].includes(author)); // false
console.log(arrayAuthors.includes(author)); // true
console.log([1, 2].includes(author)); // false

toUpperCase

toUpperCase 方法返回一个全部为大写字母的字符串。

const title = "Develop Point";
console.log(title.toUpperCase()); // DEVELOP POINT

toLocaleLowerCase

toLocaleLowerCase 方法返回一个全部为小写字母的字符串。

const title = "Develop Point";
console.log(title.toLocaleLowerCase()); // develop point

字符串遍历

字符串中 length 属性将返回字符串的长度。通过 .length 属性来对字符串进行遍历。

const string = "DevPoint";
for (let i = 0; i < string.length; i++) {
    console.log(string[i]);
}

将可以看到依次输出 D、d、v、p、 o、 i、 n 、t。

使用 search 方法在另一个字符串中搜索一个字符串，它将返回该字符串的索引，这个方法和 indexOf 方法的效果类似。

console.log("DevPoint".search("Point")); // 3
console.log("DevPoint Develop Point".search("e")); // 1
console.log("DevPoint".search("e")); // 1

indexOf

indexOf 方法用于查找字符串的第一个索引，要查找的字符或者字符串多次重复，方法只会返回第一次出现的索引值。

const getStringIndex = (str, searchStr) => str.indexOf(searchStr);

console.log(getStringIndex("DevPoint", "v")); // 2
console.log(getStringIndex("DevPoint Develop Point", "P")); // 3
console.log(getStringIndex("DevPoint Develop Point", "Dev")); // 0
console.log(getStringIndex("DevPoint", "1")); // -1

slice

slice 方法截取字符串的一部分并在新字符串中返回截取的部分。slice，方法接受两个参数：开始索引和结束索引。结果字符串是这两个索引之间的切片字符串，但末尾索引处的字符除外。slice 通常用于字符串的截取。

console.log("DevPoint".slice(0, 3)); // Dev
console.log("DevPoint".slice(3, 7)); // Poin，不包含索引为 7 的字母 t

如果没有提供最后一个索引，slice 将继续查找直到字符串结束：

console.log("DevPoint".slice(3)); // Point

还可以使用负参数从字符串末尾开始对字符串进行截取，为负数话就是从右边开始数起。

console.log("DevPoint".slice(-5)); // Point
console.log("DevPoint".slice(-5, -1)); // Poin

replace

replace 方法将字符串中的特定值替换为另一个值。

console.log("DevPoint".replace("Dev", "Develop ")); // Develop Point

concat

concat() 方法连接两个或多个字符串：

const str1 = "Develop";
const str2 = "Point";
const arrStr = [str1, " ", str2];
console.log(str1.concat(" ", str2)); // Develop Point
console.log("".concat(...arrStr)); // Develop Point

trim

JavaScript 中的 trim() 会删除字符串两边的空格：

const str1 = " Develop ";
console.log(str1.trim()); // Develop

split

split() 方法使用指定的分隔符字符串将一个 String 对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。

const str = "The split() method takes";

const arrayWorlds = str.split(" ");
console.log(arrayWorlds); // [ 'The', 'split()', 'method', 'takes' ]

lastIndexOf

lastIndexOf 方法返回指定文本在字符串中最后一次出现的索引，与 indexOf 的结果相反（查找的内容存在）：

const getStringLastIndex = (str, searchStr) => str.lastIndexOf(searchStr);

console.log(getStringLastIndex("DevPoint", "v")); // 2
console.log(getStringLastIndex("DevPoint Develop Point", "P")); // 17
console.log(getStringLastIndex("DevPoint Develop Point", "Dev")); // 9
console.log(getStringLastIndex("DevPoint", "1")); // -1

charAt

charAt 方法返回字符串中指定索引或位置处的字符。将前面字符串遍历使用 charAt 方法来实现，代码如下：

const string = "DevPoint";
for (let i = 0; i < string.length; i++) {
    console.log(string.charAt(i));
}

charCodeAt

charCodeAt 方法返回 unicode 字符串中指定索引处的字符。返回 0 到 65535 之间的整数，表示给定索引处的 UTF-16 代码单元。

const title = "Develop Point;";
console.log(title.charCodeAt(0)); // 68
console.log(title.toLocaleLowerCase().charCodeAt(0)); // 100

repeat

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

const title = "Develop Point;";
console.log(title.repeat(2)); // Develop Point;Develop Point;

match

match 方法检索返回一个字符串匹配正则表达式的结果。下面的示例在字符串中搜索所有大写字母。它返回与正则表达式匹配的值的字符串数组。

const title = "Develop Point;";
const regex = /[A-Z]/g;
console.log(title.match(regex)); // [ 'D', 'P' ]

matchAll

matchAll 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。它不会创建一个包含所有匹配项的单个数组，而是创建一个迭代器。 和 match 相比，主要的区别是返回值的区别，而参数有细微的区别（参数 RegExp 必须是设置了全局模式 g 的形式，否则会抛出异常 TypeError）。

const title = "Develop Point;";
const regex = /[A-Z]/g;
const result = title.matchAll(regex);
console.log(result); // Object [RegExp String Iterator] {}

console.log([...result]);
// [
//   [ 'D', index: 0, input: 'Develop Point;', groups: undefined ],
//   [ 'P', index: 8, input: 'Develop Point;', groups: undefined ]
// ]

总结

JavaScript 中的字符串方法非常有用，了解它们也很重要，作为前端开发人员，很多时候会发现自己在使用它们。

 

match()matchAll()split()slice()javascriptincludes()