JavaScript 字符串操作方法

更新日期: 2023-01-28阅读: 755标签: 字符串作者: 天行无忌

字符串是每种编程语言的基本组成部分,而 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

使用 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 中的字符串方法非常有用,了解它们也很重要,作为前端开发人员,很多时候会发现自己在使用它们。

来自:https://juejin.cn/post/7193647854294925367


链接: https://fly63.com/article/detial/12336

字符串拼接引发的BUG

我们先温习一下JavaScript基础知识。在JavaScript中,根据+左右两边变量的类型的不同,+符号可以用于数字相加或则字符串拼接。我用了string += +string这样的写法,也就是说:由于写代码的时候拷贝黏贴,不小心整了一个多余的+号?

原生js去掉字符串2端空格Trim()方法总汇

在我们使用JavaScript编写脚本的时候,经常会遇到把字符串两边的空格进行清除,它不想其它语言会有内置方法函数处理,js需要我们自己代码来实现。如果用过jquery库的话,它提供了trim方法,我们可以直接使用。

js中String.prototype实现string过滤空格_字符串空格过滤

我们都知道prototype可以向对象上添加属性和方法,语法如下:object.prototype.name=value。这篇文章就是利用prototype,为字符串扩展过滤空格的方法

字符串的格式化功能的实现_js实现连接字符串及变量

在开发中过程中,经常会遇到使用占位符的形式来格式化字符串,我们通过js扩展String.prototype.format字符串拼接的功能,实现如下:

es6中新增的字符串方法

es6中新增的字符串方法:字符串模板用法${变量名}、字符串查找方法string.includes(要找得字符串)、检查字符串是否已xxx开头、字符串重复方法string.repeat(次数)、字符串填充string.padStart

js中字符串截取的几种方式

众所周知,js提供了很多字符串截取的方式。下面主要介绍js中slice(),splice(),split(),substring(),substr()的使用和区别,主要介绍了JavaScript截取、切割字符串的技巧,需要的朋友可以参考

JavaScript:生成重复的字符串(字符串乘法)

看到一个题目要求写一个函数times,输出str重复num次的字符串。除了利用循环还有几种方法:递归,结合三元表达式更简洁。数组的 join() 方法。ES6的 repeat() 方法。ES6目前没有全部兼容。

常用的String原型

对于常用的字符串原型的举例:在字符串末尾追加字符串 、删除指定索引位置的字符,索引无效将不删除任何字符 、删除指定索引区间的字符串 、检查字符串是否以subStr结尾

使用String. localeCompare比较字符串

javascript提供stringA.localeCompare(stringB)方法,来判断一个字符串stringB是否排在stringA的前面。返回值: 如果引用字符存在于比较字符之前则为负数; 如果引用字符存在于比较字符之后则为正数; 相等的时候返回 0 。

js里面判断一个字符串是否包含某个子串的方法

ES6的includes, 返回 Boolean、ES5 indexOf,返回子串起始位置,不包含则返回-1、search,返回起始位置或者-1、lodash includes, JavaScript 工具库

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!