Home > Article > Web Front-end > Examples introduce some common methods of operating strings in javaScript
This article brings you relevant knowledge about javascript. It mainly introduces some common methods of operating strings in javaScript. The article introduces it in detail through sample code and has certain reference value. Let’s take a look at it together, I hope it will be helpful to everyone.
[Related recommendations: javascript video tutorial, web front-end】
Strings in JavaScript have a length attribute, which can be used to get the length of the string
const str = 'hello'; str.length // 输出结果：5
Both the charAt() and charCodeAt() methods can obtain the value at the specified position through the index:
charAt() method can return the character at the specified position. The syntax is as follows:
string.charAt(index)
index represents the index value of the character in the string:
const str = 'hello'; str.charAt(1) // 输出结果：e
The string can also directly obtain the corresponding character through the index value, so what does it have with charAt() The difference
const str = 'hello'; str.charAt(1) // 输出结果：e str[1] // 输出结果：e str.charAt(5) // 输出结果：'' str[5] // 输出结果：undefined
You can see that when the value of index is not within the length range of str, str[index] will return undefined, and charAt(index) will return an empty string; in addition, str[index] is not compatible with ie6-ie8, but charAt(index) is compatible.
charCodeAt(): This method will return the Unicode value of the character at the specified index position. The return value is an integer between 0 - 65535 , represents the UTF-16 code unit at the given index. If there is no character at the specified position, NaN will be returned:
let str = "abcdefg"; console.log(str.charCodeAt(1)); // "b" --> 98
Through this method, you can obtain the specified Unicode encoding value range in the string character of. For example, the Unicode encoding range of the numbers 0 to 9 is: 48 to 57. You can use this method to filter the numbers in the string. Of course, it will be more convenient if you are more familiar with regular expressions.
These 5 methods can be used to retrieve whether a string contains a specific sequence. The first two methods get the index value of the specified element, and will only return the position of the first matched value. The last three methods return Boolean values, indicating whether the specified value is matched.
Note: These 5 methods are all case sensitive!
indexOf(): Search for a certain character, If found, return the first matched position, otherwise -1 is returned. The syntax is as follows:
string.indexOf(searchvalue,fromindex)
This method has two parameters:
let str = "abcdefgabc";
console.log(str.indexOf("a")); // 输出结果：0
console.log(str.indexOf("z")); // 输出结果：-1
console.log(str.indexOf("c", 4)) // 输出结果：9lastIndexOf(): Search for a certain character, if found, return the last matched position, otherwise return - 1
let str = "abcabc";
console.log(str.lastIndexOf("a")); // 输出结果：3
console.log(str.lastIndexOf("z")); // 输出结果：-1This method is similar to indexOf(), except that the search order is different. indexOf() is a forward search, and lastIndexOf() is a reverse search.
includes(): This method is used to determine whether the string contains the specified substring. Returns true if a matching string is found, false otherwise. The syntax of this method is as follows:
string.includes(searchvalue, start)
This method has two parameters:
let str = 'Hello world!'; str.includes('o') // 输出结果：true str.includes('z') // 输出结果：false str.includes('e', 2) // 输出结果：false
startsWith(): This method is used to detect whether the string starts with the specified substring . Returns true if it starts with the specified substring, false otherwise. Its syntax is the same as the includes() method above.
let str = 'Hello world!'; str.startsWith('Hello') // 输出结果：true str.startsWith('Helle') // 输出结果：false str.startsWith('wo', 6) // 输出结果：true
endsWith(): This method is used to determine whether the current string ends with the specified substring. Returns true if the substring passed in is at the end of the search string, false otherwise. The syntax is as follows:
string.endsWith(searchvalue, length)
This method has two parameters:
let str = 'Hello world!'; str.endsWith('!') // 输出结果：true str.endsWith('llo') // 输出结果：false str.endsWith('llo', 5) // 输出结果：true
You can see that when the second parameter is set to 5, it will be retrieved from the first 5 characters of the string, so true will be returned.
The concat() method is used to concatenate two or more strings. This method does not change the original string, but returns a new string concatenated with two or more strings. Its syntax is as follows:
string.concat(string1, string2, ..., stringX)
其中参数 string1, string2, ..., stringX 是必须的，他们将被连接为一个字符串的一个或多个字符串对象。
let str = "abc";
console.log(str.concat("efg")); //输出结果："abcefg"
console.log(str.concat("efg","hijk")); //输出结果："abcefghijk"虽然concat()方法是专门用来拼接字符串的，但是在开发中使用最多的还是加操作符+，因为其更加简单。
split() 方法用于把一个字符串分割成字符串数组。该方法不会改变原始字符串。其语法如下：
string.split(separator,limit)
该方法有两个参数：
let str = "abcdef";
str.split("c"); // 输出结果：["ab", "def"]
str.split("", 4) // 输出结果：['a', 'b', 'c', 'd']如果把空字符串用作 separator，那么字符串中的每个字符之间都会被分割。
str.split(""); // 输出结果：["a", "b", "c", "d", "e", "f"]其实在将字符串分割成数组时，可以同时拆分多个分割符，使用正则表达式即可实现：
const list = "apples,bananas;cherries" const fruits = list.split(/[,;]/) console.log(fruits); // 输出结果：["apples", "bananas", "cherries"]
substr()、substring()和 slice() 方法都可以用来截取字符串。
slice() 方法用于提取字符串的某个部分，并以新的字符串返回被提取的部分。其语法如下：
string.slice(start,end)
该方法有两个参数：
上面说了，如果start是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推：
let str = "abcdefg"; str.slice(1,6); // 输出结果："bcdef" str.slice(1); // 输出结果："bcdefg" str.slice(); // 输出结果："abcdefg" str.slice(-2); // 输出结果："fg" str.slice(6, 1); // 输出结果：""
注意，该方法返回的子串包括开始处的字符，但不包括结束处的字符。
substr() 方法用于在字符串中抽取从开始下标开始的指定数目的字符。其语法如下：
string.substr(start,length)
该方法有两个参数：
let str = "abcdefg"; str.substr(1,6); // 输出结果："bcdefg" str.substr(1); // 输出结果："bcdefg" 相当于截取[1,str.length-1] str.substr(); // 输出结果："abcdefg" 相当于截取[0,str.length-1] str.substr(-1); // 输出结果："g"
substring() 方法用于提取字符串中介于两个指定下标之间的字符。其语法如下：
string.substring(from, to)
该方法有两个参数：
注意： 如果参数 from 和 to 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 from 比 to 大，那么该方法在提取子串之前会先交换这两个参数。并且该方法不接受负的参数，如果参数是个负数，就会返回这个字符串。
let str = "abcdefg"; str.substring(1,6); // 输出结果："bcdef" [1,6) str.substring(1); // 输出结果："bcdefg" [1,str.length-1] str.substring(); // 输出结果："abcdefg" [0,str.length-1] str.substring(6,1); // 输出结果 "bcdef" [1,6) str.substring(-1); // 输出结果："abcdefg"
注意，该方法返回的子串包括开始处的字符，但不包括结束处的字符。
toLowerCase() 和 toUpperCase()方法可以用于字符串的大小写转换。
toLowerCase()：该方法用于把字符串转换为小写。
let str = "adABDndj"; str.toLowerCase(); // 输出结果："adabdndj"
toUpperCase()：该方法用于把字符串转换为大写。
let str = "adABDndj"; str.toUpperCase(); // 输出结果："ADABDNDJ"
我们可以用这个方法来将字符串中第一个字母变成大写：
let word = 'apple' word = word[0].toUpperCase() + word.substr(1) console.log(word) // 输出结果："Apple"
replace()、match()和search()方法可以用来匹配或者替换字符。
replace()：该方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。其语法如下：
string.replace(searchvalue, newvalue)
该方法有两个参数：
let str = "abcdef";
str.replace("c", "z") // 输出结果：abzdef执行一个全局替换, 忽略大小写:
let str="Mr Blue has a blue house and a blue car"; str.replace(/blue/gi, "red"); // 输出结果：'Mr red has a red house and a red car'
注意： 如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。
match()：该方法用于在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。其语法如下：
string.match(regexp)
该方法的参数 regexp 是必需的，规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。
注意： 该方法返回存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。
let str = "abcdef";
console.log(str.match("c")) // ["c", index: 2, input: "abcdef", groups: undefined]search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。其语法如下：
string.search(searchvalue)
该方法的参数 regex 可以是需要在 string 中检索的子串，也可以是需要检索的 RegExp 对象。
注意： 要执行忽略大小写的检索，请追加标志 i。该方法不执行全局匹配，它将忽略标志 g，也就是只会返回第一次匹配成功的结果。如果没有找到任何匹配的子串，则返回 -1。
返回值： 返回 str 中第一个与 regexp 相匹配的子串的起始位置。
let str = "abcdef"; str.search(/bcd/) // 输出结果：1
trim()、trimStart()和trimEnd()这三个方法可以用于移除字符串首尾的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。
trim() 方法用于移除字符串首尾空白符，该方法不会改变原始字符串：
let str = " abcdef " str.trim() // 输出结果："abcdef"
注意，该方法不适用于null、undefined、Number类型。
trimStart() 方法的的行为与trim()一致，不过会返回一个从原始字符串的开头删除了空白的新字符串，不会修改原始字符串：
const s = ' abc '; s.trimStart() // "abc "
trimEnd() 方法的的行为与trim()一致，不过会返回一个从原始字符串的结尾删除了空白的新字符串，不会修改原始字符串：
const s = ' abc '; s.trimEnd() // " abc"
valueOf()和toString()方法都会返回字符串本身的值，感觉用处不大。
valueOf()：返回某个字符串对象的原始值，该方法通常由 JavaScript 自动进行调用，而不是显式地处于代码中。
let str = "abcdef" console.log(str.valueOf()) // "abcdef"
toString()：返回字符串对象本身
let str = "abcdef" console.log(str.toString()) // "abcdef"
repeat() 方法返回一个新字符串，表示将原字符串重复n次：
'x'.repeat(3) // 输出结果："xxx" 'hello'.repeat(2) // 输出结果："hellohello" 'na'.repeat(0) // 输出结果：""
如果参数是小数，会向下取整：
'na'.repeat(2.9) // 输出结果："nana"
如果参数是负数或者Infinity，会报错：
'na'.repeat(Infinity) // RangeError 'na'.repeat(-1) // RangeError
如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0。
'na'.repeat(-0.9) // 输出结果：""
如果参数是NaN，就等同于 0：
'na'.repeat(NaN) // 输出结果：""
如果repeat的参数是字符串，则会先转换成数字。
'na'.repeat('na') // 输出结果："" 'na'.repeat('3') // 输出结果："nanana"
padStart()和padEnd()方法用于补齐字符串的长度。如果某个字符串不够指定长度，会在头部或尾部补全。
padStart()用于头部补全。该方法有两个参数，其中第一个参数是一个数字，表示字符串补齐之后的长度；第二个参数是用来补全的字符串。
如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串：
'x'.padStart(1, 'ab') // 'x'
如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串：
'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax'
如果省略第二个参数，默认使用空格补全长度：
'x'.padStart(4) // ' x'
padStart()的常见用途是为数值补全指定位数，笔者最近做的一个需求就是将返回的页数补齐为三位，比如第1页就显示为001，就可以使用该方法来操作：
"1".padStart(3, '0') // 输出结果： '001' "15".padStart(3, '0') // 输出结果： '015'
padEnd()用于尾部补全。该方法也是接收两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串：
'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba'
parseInt()和parseFloat()方法都用于将字符串转为数字。
parseInt() 方法用于可解析一个字符串，并返回一个整数。其语法如下：
parseInt(string, radix)
该方法有两个参数：
当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。
parseInt("10"); // 输出结果：10
parseInt("17",8); // 输出结果：15 (8+7)
parseInt("010"); // 输出结果：10 或 8当参数 radix 的值以 “0x” 或 “0X” 开头，将以 16 为基数：
parseInt("0x10") // 输出结果：16如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN：
parseInt("50", 1) // 输出结果：NaN
parseInt("50", 40) // 输出结果：NaN只有字符串中的第一个数字会被返回，当遇到第一个不是数字的字符为止:
parseInt("40 4years") // 输出结果：40如果字符串的第一个字符不能被转换为数字，就会返回 NaN：
parseInt("new100") // 输出结果：NaN字符串开头和结尾的空格是允许的：
parseInt(" 60 ") // 输出结果： 60parseFloat() 方法可解析一个字符串，并返回一个浮点数。该方法指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。其语法如下：
parseFloat(string)
parseFloat 将它的字符串参数解析成为浮点数并返回。如果在解析过程中遇到了正负号（+ 或 -）、数字 (0-9)、小数点，或者科学记数法中的指数（e 或 E）以外的字符，则它会忽略该字符以及之后的所有字符，返回当前已经解析到的浮点数。同时参数字符串首位的空白符会被忽略。
parseFloat("10.00") // 输出结果：10.00
parseFloat("10.01") // 输出结果：10.01
parseFloat("-10.01") // 输出结果：-10.01
parseFloat("40.5 years") // 输出结果：40.5如果参数字符串的第一个字符不能被解析成为数字，则 parseFloat 返回 NaN。
parseFloat("new40.5") // 输出结果：NaNJS 字符串允许简单的重复，与纯手工复制字符串不同，我们可以使用字符串的repeat方法。
const laughing = '小智'.repeat(3) consol.log(laughing) // "小智小智小智" const eightBits = '1'.repeat(8) console.log(eightBits) // "11111111"
有时，我们希望字符串具有特定长度。 如果字符串太短，则需要填充剩余空间，直到达到指定的长度为止。
过去，主要还是使用库 left-pad。 但是，今天我们可以使用padStart和SpadEnd方法，选择哪种方法取决于是在字符串的开头还是结尾填充字符串。
// 在开头添加 "0"，直到字符串的长度为 8。 const eightBits = '001'.padStart(8, '0') console.log(eightBits) // "00000001" //在末尾添加“ *”，直到字符串的长度为5。 const anonymizedCode = "34".padEnd(5, "*") console.log(anonymizedCode) // "34***"
有多种方法可以将字符串分割成字符数组，我更喜欢使用扩展操作符(...):
const word = 'apple' const characters = [...word] console.log(characters) // ["a", "p", "p", "l", "e"]
注意，这并不总是像预期的那样工作。有关更多信息，请参见下一个技巧。
可以使用length属性。
const word = "apple"; console.log(word.length) // 5
但对于中文来说，这个方法就不太靠谱。
const word = "?" console.log(word.length) // 2
日本汉字?返回length为2，为什么？ JS 将大多数字符表示为16位代码点。 但是，某些字符表示为两个（或更多）16 位代码点，称为代理对。 如果使用的是length属性，JS 告诉你使用了多少代码点。 因此，?（hokke）由两个代码点组成，返回错误的值。
那怎么去判断呢，使用解构操作符号(...)
const word = "?" const characters = [...word] console.log(characters.length) // 1
这种方法在大多数情况下都有效，但是有一些极端情况。 例如，如果使用表情符号，则有时此长度也是错误的。 如果真想计算字符正确长度，则必须将单词分解为 字素簇(Grapheme Clusters) ，这超出了本文的范围，这里就不在这说明。
反转字符串中的字符是很容易的。只需组合扩展操作符(...)、Array.reverse方法和Array.join方法。
const word = "apple"
const reversedWord = [...word].reverse().join("")
console.log(reversedWord) // "elppa"和前面一样，也有一些边缘情况。遇到边缘的情况就有需要首先将单词拆分为字素簇。
一个非常常见的操作是将字符串的第一个字母大写。虽然许多编程语言都有一种本地方法来实现这一点，但 JS 需要做一些工作。
let word = 'apply' word = word[0].toUpperCase() + word.substr(1) console.log(word) // "Apple"
另一种方法:
// This shows an alternative way
let word = "apple";
// 使用扩展运算符（`...`）拆分为字符
const characters = [...word];
characters[0] = characters[0].toUpperCase();
word = characters.join("");
console.log(word); // "Apple"假设我们要在分隔符上分割字符串，第一想到的就是使用split方法，这点，智米们肯定知道。 但是，有一点大家可能不知道，就是split可以同时拆分多个分隔符, 使用正则表达式就可以实现：
// 用逗号(,)和分号(;)分开。 const list = "apples,bananas;cherries" const fruits = list.split(/[,;]/) console.log(fruits); // ["apples", "bananas", "cherries"]
字符串搜索是一项常见的任务。 在 JS 中，你可以使用String.includes方法轻松完成此操作。 不需要正则表达式。
const text = "Hello, world! My name is Kai!"
console.log(text.includes("Kai")); // true在字符串的开头或结尾进行搜索，可以使用String.startsWith和String.endsWith方法。
const text = "Hello, world! My name is Kai!"
console.log(text.startsWith("Hello")); // true
console.log(text.endsWith("world")); // false有多种方法可以替换所有出现的字符串。 可以使用String.replace方法和带有全局标志的正则表达式。 或者，可以使用新的String.replaceAll方法。 请注意，并非在所有浏览器和Node.js 版本中都可用此新方法。
const text = "I like apples. You like apples."
console.log(text.replace(/apples/g, "bananas"));
// "I like bananas. You like bananas."
console.log(text.replaceAll("apples", "bananas"));
// "I likJSON 不是仅限 JavaScript 的数据类型，并且广泛用于前后端数据交互。JSON.stringify() 函数用于将对象转换为 JSON 格式的字符串。通常，只需将对象作为参数即可，如下所示：
const article = {
title: "JavaScript 字符串技巧",
view: 30000,
comments: null,
content: undefined,
};
const strArticle = JSON.stringify(article);
console.log(strArticle); // {"title":"JavaScript 字符串技巧","view":30000,"comments":null}从上面的代码可以看到，在 stringify 中会过滤掉 undefined 的值，但 null 值不会。
JSON.stringify() 可以接受两个可选参数，第二个参数是一个替换器，可以在其中指定要打印的键的数组或清除它们的函数。如下代码：
console.log(JSON.stringify(article, ["title", "comments"])); // {"title":"JavaScript 字符串技巧","comments":null}
console.log(JSON.stringify(article, [])); // {}对于一个巨大的 JSON，传递一个长数组可能影响可读性及效率。因此，可以设置替换函数并为要跳过的键返回 undefined ，如下代码：
const result = JSON.stringify(article, (key, value) =>
key === "title" ? undefined : value
);
console.log(result); // {"view":30000,"comments":null}JSON.stringify() 的第三个参数通过指定缩进（在嵌套块中很有用）来格式化 JSON，可以传递一个数字来设置缩进间距，甚至可以传递一个字符串来替换空格。如下代码：
console.log(JSON.stringify(article, ["title"], "\t"));
输出的格式如下：
{
"title": "JavaScript 字符串技巧"
}还有一个 JSON.parse() 函数，它接受一个 JSON 字符串并将其转换为一个 JavaScript 对象。它还接受一个 reviver 函数，可以在返回值之前拦截对象属性并修改属性值。
const reviver = (key, value) => (key === "view" ? 0 : value);
var jsonString = JSON.stringify(article);
var jsonObj = JSON.parse(jsonString, reviver);
console.log(jsonObj); // { title: 'JavaScript 字符串技巧', view: 0, comments: null }在 JavaScript 中有三种创建字符串的方式，可以使用单引号 '' 、双引号 "" 或反引号（键盘的左上方， 1 的左边按键）。
const countries1 = "China"; const countries2 = "China"; const countries3 = `China`;
前两种创建方式基本相同，并且可以混合和匹配以连接或添加带引号的字符串（通过使用相反的语法风格），而反引号可以对字符串进行花哨而强大的操作。
反引号也称为模板字面量，反引号在创建多行字符串和嵌入表达式时很方便。下面是如何在 JavaScript 中使用字符串插值创建多行字符串的代码：
const year = "2021";
const month = 7;
const day = 2;
const detail = `今天是${year}年${month}月${day}日，
是个不错的日子！`;
console.log(detail);输出的结果也换行了，如下：
今天是2021年7月2日，
是个不错的日子！
除了字符串字面量，在 ${} 中允许任何有效的表达式，它可以是一个函数调用或表达式，甚至是一个嵌套模板。
标记模板是模板字面量的一种高级形式，它允许使用一个函数来解析模板字面量，其中内嵌的表达式是参数。如下代码：
const title = "JavaScript 字符串技巧";
const view = 30000;
const detail = (text, titleExp, viewExp) => {
const [string1, string2, string3] = [...text];
return `${string1}${titleExp}${string2}${viewExp}${string3}`;
};
const intro = detail`本文的标题是《${title}》，当前阅读量是： ${view}`;
console.log(intro); // 文的标题是《JavaScript 字符串技巧》，当前阅读量是：30000查找 JavaScript 字符串中是否存在子字符串时间容易的事情，在 ES6 中，只需要使用 includes 函数。
但需要验证字符串是否存于数据中，主要数组中其中一项包含就返回 true ，如果都不包含返回 false，因此需要使用 some 函数与includes 一起使用，如下代码：
const arrayTitles = ["Javascript", "EScript", "Golang"];
const hasText = (array, findText) =>
array.some((item) => item.includes(findText));
console.log(hasText(arrayTitles, "script")); // true
console.log(hasText(arrayTitles, "php")); // false【相关推荐：javascript视频教程、web前端】
The above is the detailed content of Examples introduce some common methods of operating strings in javaScript. For more information, please follow other related articles on the PHP Chinese website!