写点什么

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

作者:devpoint
  • 2023-01-28
    广东
  • 本文字数:2491 字

    阅读完需:约 8 分钟

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

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

includes

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


const arrayAuthors = ["DevPoint", "DevelopPoint"];const author = "DevPoint";console.log([].includes(author)); // falseconsole.log(arrayAuthors.includes(author)); // trueconsole.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]);}
复制代码


将可以看到依次输出 Ddvpoint

search

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


console.log("DevPoint".search("Point")); // 3console.log("DevPoint Develop Point".search("e")); // 1console.log("DevPoint".search("e")); // 1
复制代码

indexOf

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


const getStringIndex = (str, searchStr) => str.indexOf(searchStr);
console.log(getStringIndex("DevPoint", "v")); // 2console.log(getStringIndex("DevPoint Develop Point", "P")); // 3console.log(getStringIndex("DevPoint Develop Point", "Dev")); // 0console.log(getStringIndex("DevPoint", "1")); // -1
复制代码

slice

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


console.log("DevPoint".slice(0, 3)); // Devconsole.log("DevPoint".slice(3, 7)); // Poin,不包含索引为 7 的字母 t
复制代码


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


console.log("DevPoint".slice(3)); // Point
复制代码


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


console.log("DevPoint".slice(-5)); // Pointconsole.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 Pointconsole.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")); // 2console.log(getStringLastIndex("DevPoint Develop Point", "P")); // 17console.log(getStringLastIndex("DevPoint Develop Point", "Dev")); // 9console.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)); // 68console.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 中的字符串方法非常有用,了解它们也很重要,作为前端开发人员,很多时候会发现自己在使用它们。


发布于: 刚刚阅读数: 2
用户头像

devpoint

关注

细节的追求者 2011-11-12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
复习前端:JavaScript 字符串操作方法_JavaScript_devpoint_InfoQ写作社区