JavaScript 中的字符串是一种基本的数据类型，用于表示文本数据。本文主要介绍了js字符串分割处理以及其它常用的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧！

语法：str.slice(start，end(不包含end元素))。

关于这个方法，使用时一定要搞懂五个关键点：

（1）截取字符串时不包括下标为end的元素。

（2）end是可选参数，没有时，默认从start到结束的所有字符串。

（3）String.slice与Array.slice区别：字符串和数组都具有这个方法，它们的返回结果形式不一样，一个是一段字符串，一个是一段浅复制后的数组。

（4）参数为负数时，将字符串的长度与对应的负数相加，结果作为参数。

（5）第一个参数比第二个参数大，结果返回空字符串。

const str = "hello world!"; // length = 12

console.log(str.slice(4, 9)); // o wor
console.log(str.slice(9)); // ld!
// 字符串长度是12，（12-6=6），所以slice（-6）从下标为6的字母开始
console.log(str.slice(-6)); // world! 
// slice（3，12-5）就是从下标3截取到下标7的字符串，得到"lo w"
console.log(str.slice(3, -5)); // lo w
// slice（-6+12=6，-2+12=10）,实际是slice(6，10)
console.log(str.slice(-6, -2)); // worl
console.log(str.slice(8, 2)); // ''空字符串

语法：str.substring(start，end(不包含end元素))。

关于这个方法，需要搞懂几个关键点：

（1）返回的字符串中不包括 end 处的字符。

（2）参数为负数时或不是数字，直接将参数转成0。

（3）如果参数 start 与 end 相等，那么该方法返回的就是一个空串，即长度为 0 的字符串。

（4）如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。

const str = "hello world!"; // length = 12

console.log(str.substring(3,7)); //lo w
// 这个（7，3）会默认变成（3，7）将小的当起始位置来处理。
console.log(str.substring(7,3)); //lo w
// 负参数转成0，相当于从下标0开始截取
console.log(str.substring(-3)); //hello world!
// 先交换位置，变成str.substring(-4，3)
// 在把负参数转成0，结果相当于(str.substring(0,3))
console.log(str.substring(3,-4)); //hel  

语法：str.substr(start，length)。

关于这个方法，也需要搞懂几个关键点： 

（1）表示从这个位置开始截取字符串(start从0开始)；如果是负数，则从末尾开始算起，-1 表示最后一个字符。

（2）length是表示截取的字符长度，必须是数值。可以没有，如果省略，则截取从 start 到字符串结尾的所有字符。 

（3）最重要一点来自官网说明，如下所示：ECMAScript没有对该方法进行标准化，因此反对使用它。

// 从下标为2的字符开始，截取6个长度的字符
console.log(str.substr(2,6)); // llo wo
// 从下标为3的字母开始到最后
console.log(str.substr(3)); // lo world!
// 从倒数第6个字符开始截取4个长度，substr(12-6,4)
console.log(str.substr(-6,4)); // worl
// // 从倒数第6个字符开始截取到最后
console.log(str.substr(-6)); // world!

由于substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用。

（1）都接收两个参数，slice和substring接收的是起始位置和结束位置(注意：不包括结束位置)，而substr接收的则是起始位置和所要返回的字符串长度。 

（2）需要注意substring是以两个参数中较小一个作为起始位置，较大的参数作为结束位置。 

（3）slice：将字符串的长度与对应的负数相加，结果作为参数。substr：只会将第一个参数与字符串长度相加后的结果作为第一个参数（第一个参数为负数）。substring：直接将负参数直接转成0。

split() 方法用于把一个字符串分割成字符串数组。

语法：split（separator，howmany）。

需要记住两个地方：1、separator可以是字符串或正则表达式。2、howmany可选参数，表示返回数组的最大长度。

const result = '|a|b|c|'.split(/\|/);
console.log(result);
//["", "a", "b", "c", ""]

const str = '0123456789';
console.log(str.split('', 5));
//["0", "1", "2", "3", "4"]

split方法把一个字符串string分割成片段创建一个字符串数组，可选参数howmany可以限制被分割的片段的数量。

语法：string.charAt(index)。

返回指定位置（如上index）的字符，如果index小于0或者大于等于字符串的长度string.length，它会返回空字符串。

const str = "hello world!"; // length = 12

console.log(str.charAt(0));//h
console.log(str.charAt(8));//r
console.log(str.charAt(-2));//""
console.log(str.charAt(13));//""

charAt其实可以像下面这样实现：

Function.prototype.method = function (name, func) {
    this.prototype[name] = func;
    return this;
};
String.method('myCharAt', function (index) {
    return this.slice(index, index + 1);
});

const str = "hello world!"; // length = 12
console.log(str.myCharAt(1)) // e

用于连接两个或者多个字符串。相较于数组Array.concat()。其实字符串倒是用的不多，主要是之前使用加号（+）会更方便一些，字符串模板语法一步优化了字符串拼接的操作。

const str = "a".concat("b","c","d","e");
console.log(str); // abcde

（1）match方法

参数为普通字符串的使用方式，此时match方法的返回值是存放首次匹配内容的数组。如果没有找到匹配结果，返回null。 

语法：str.match(searchvalue)。searchvalue：必需，规定方法要检索的字符串。

const str = "hello world!"; // length = 12

console.log(str.match("l"));
// ["l", index: 2, input: "hello world!", groups: undefined]

对上述代码运行结果分析如下： 

（1）match方法在有匹配结果的时候返回值是一个数组。 

（2）数组第一个元素是match方法首次匹配到的子字符串，"hello world!"虽然有多个"l"，但是返回的数组只存储首次匹配到的"l"，如果match方法的参数是全局匹配的正则，将会存储所有的匹配到的子字符串。 

（3）index属性值返回首次匹配到字符串的索引位置。 

（4）input属性值是原字符串"hello world!"。 

（5）groups属性当前并不被支持，暂时不做介绍。

const str = "hello world!"; // length = 12

console.log(str.match('wor'));
// ["wor", index: 6, input: "hello world!", groups: undefined]

（1）首次匹配到子字符的位置，以子字符串的首字符在原字符串位置为准。

（2）字符串与数组类似，字符位置从0开始计算，也就是第一个字符的位置为0，第二个位置为1，以此类推。

const str = "hello world!"; // length = 12
console.log(str.match("123"));//null

如果匹配不到任何内容，方法返回值为null。

（2）正则表达式 match()

match方法可在字符串内查找一个或多个与指定正则表达式匹配的子字符串。 方法的返回值是存放着匹配结果的数组，但数组元素并不一定全都是匹配结果。 

语法结构：stringObject.match([string] | [RegExp]) 。

参数解析： 

（1）stringObject：从中查找子字符串的源字符串。 

（2）reg：正则表达式对象或者正则表达式直接量。

// 1.不使用全局匹配 
const text = 'Today is the 227th day of 2024,I must finish these 2 projects within 21 days.';
//只能匹配字符串中出现的首个数字，未使用全局匹配符g
const result = text.match(/\d+/); 
console.log(result);

这个例子的结果是没有使用全局匹配的正则表达式的匹配结果。说白了，就是正则表达式的末尾没跟g。由于不适用全局匹配，所以match()方法只找到源字符串中首次匹配的子串后，就立刻得到返回结果，不再比较之后剩余的部分是否还有能匹配上的内容。

我们可以看到，match()的结果是一个数组，该数组一共有5项。各项代表的意思如下：第0项：匹配到字符串；第1项：groups：undefined，这表示当前的正则表达式没使用分组；第2项：index表示首次匹配上的子串的起始下标；第3项：input，表示源字符串；第4项：length，表示匹配到的结果个数，由于这里不使用全局匹配，只找到首次匹配项就结束了，所以匹配结果只有1个，length也就是1。　

如果想匹配所有的符合条件的子串，就必须在正则的末尾添加全局匹配符g。

// 2.使用全局匹配
//匹配所有的数字，使用了全局匹配符g
const text = 'Today is the 227th day of 2024,I must finish these 2 projects within 21 days.';
const result = text.match(/\d+/g); 
console.log(result);
//  ['227', '2024', '2', '21']

这个例子在正则表达式的末尾添加了g，该正则表达式的意图是，在字符串text中匹配出所有的由数字组成的子符串。

// 3.使用分组,且不使用全局匹配g
const text = 'Today is the 227th day of 2024, the 168th Thanksgiving Day.';
//匹配str中首个以数字开头，并且以th结尾的子串
const result = text.match(/\d+(th)/); 
console.log(result);

由于该正则表达式为：/\d+(th)/，该表达式中使用了小括号()，在此处的作用为分组。所以match()的结果是带有分组特征的。返回的数组包含多个元素，第一个元素是以贪婪模式找到的最长的匹配，之后的元素依次为该匹配中的第一、第二、第三 ......个分组，这里只有1个分组，所以也就只匹配到1个分组结果，也就是”th"。

假如正则表达式改成：/\d+(t)(h)/，那么匹配到的项就有3个，分别是 ：'227th' 、 't' 、'h'。

// 4.使用分组，同时使用全局匹配g
//匹配str中所有的以数字开头，并且以th结尾的子串
const result = text.match(/\d+(th)/g); 
console.log(result);
//  ["286th", "108th"]

此例和上面的例子区别只有一点，就是正则表达式末尾多了个g，表示全局匹配。当正则中使用全局匹配符g，即使有分组的存在，在匹配结果中也只有匹配到的最长的，那些分组的子匹配都不见了。

str.replace(searchValue，replaceValue)。

作用：replace方法对string进行查找和替换操作，并返回一个新的字符串。 

取值：参数searchValue可以是一个字符串或者一个正则表达式对象。

（1）第一种情况：如果searchValue是一个字符串，那么searchValue只会在第1次出现的地方被替换。

const str = 'abcdefgabcdabcd'.replace('ab','12');
console.log(str); // '12cdefgabcdabcd'

上面这例子就证明searchValue是一个字符串时，只会在第1次出现的地方被替换。

（2）第二种情况：如果searchValue是一个正则表达式并且带有g标识，它会替换所有的匹配。如果没有带g标识，它会仅替换第1个匹配。

const text = "aaa bbb ccc";
const n1 = text.replace(/\b\w+\b/, word => {
    return word.substring(0,1).toUpperCase() + word.substring(1)
})
console.log(n1);//Aaa bbb ccc

const n2 = text.replace(/\b\w+\b/g, word => {
    return word.substring(0,1).toUpperCase() + word.substring(1)
})
console.log(n2);//Aaa Bbb Ccc

首先，定义了一个name具有三段字符的字符串。其次，serchValue定义了一个正则表达式，其意义是：\b：匹配单词边界，准确的说是表达独立部分，可以是起始，结束，空格。\w+：表示多个字符组合( 字母 ，数字，下划线_ )。最后，如果不加g的话，只匹配第一串字符，加了之后所有的都匹配了。

（3）第三种情况：replaceValue可以是一个字符串或一个函数，如果replaceValue是一个字符串，字符$拥有特殊的含义。

const text = '"a","b","c"';
const result = text.replace(/"([^"]*)"/g , "'$1'");
console.log(result)  //'a','b','c'

/[^"]/ 和 /^["]/是不一样的，前者是排除的意思，后者是代表首位。

$1就代表前面searchValue正则所匹配的每一项内容。

$number表示分组捕获的文本，即与regexp中的第number个子表达式相匹配的文本，后面这一句话比较是关键。

const date = '2024-8-19';
const reg = /(\d+)(-)/g;
const d = date.replace(reg,($0,$1,$2) => {
    // console.log($0,$1,$2);
    // $0      $1     $2
    // 2018-   2018   -
    // 8-      8      -
    return $1+'.';
})
console.log(d); //2024.8.19

$0：匹配成功后的整体结果（2024-，8-）。

$1：匹配成功后的第一个分组，这个例子中指的是\d（2024，8）。

$2：匹配成功后的第二个分组，这个例子中指的是-（- -）。

str.search(regexp)，search方法其实和indexOf方法有点类似。它只接受一个正则表达式对象作为参数而不是一个字符串。 如果找到匹配，它返回第1个匹配的音字符位置，如果没有找到匹配，则返回-1。 这个方法会忽略g标识，且没有position参数。

const text = 'hello world! HTML';
const t1 = text.search(/!/);
console.log(t1); // 11

const t2 = text.search(/a/);
console.log(t2); // -1

用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 false。

str.startsWith(searchString[, position])。

searchString表示要搜索的子字符串。 

position可选，在 str 中搜索 searchString 的开始位置，默认值为 0。

const text = 'hello world! HTML';
console.log(text.startsWith("he")); // true
console.log(text.startsWith("ab")); // false
console.log(text.startsWith("wo", 6)); // true

用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回 true 或 false。

str.endsWith(searchString[, length])。

searchString 要搜索的子字符串。

length可选，作为 str 的长度。默认值为 str.length。

const text = 'hello world! HTML';
console.log(text.endsWith("HTML"));  // true
console.log(text.endsWith("he"));      // false
console.log(text.endsWith("ld", 11));  // true

String.fromCharCode(char...)，可接受一个指定的Unicode值，然后返回一个字符串。

const c1 = String.fromCharCode(36);
console.log(c1);//$

const c2 = String.fromCharCode(80);
console.log(c2);//P

const c3 = String.fromCharCode(100);
console.log(c3);//d

const c4 = String.fromCharCode(36,80,100);
console.log(c4);//$Pd

localeCompare方法是JavaScript中比较字符串时常用的方法之一，其主要功能是根据指定的语言环境比较两个字符串的大小关系，可以用于排序、查找等操作。通常用于排序字符串数组或表格中的行。

语法格式是：string.localeCompare(target)。

• target：要进行比较的字符串。

• locales（可选）：指定语言环境，格式为字符串或数组。

• options（可选）：一个对象，包含以下属性：

• sensitivity：比较时使用的大小写敏感度，默认值为“base”，还可以设置为“accent”或“case”等。

• ignorePunctuation：是否忽略标点符号，默认为false。

• numeric：是否将数字视为数字进行比较，默认为false。

如果string排在target之前，则返回小于0的数；如果string排在target之后，则返回大于0的数；如果两个字符串相等，则返回0。

const str="pink"; 
console.log(str.localeCompare("blue"));//1 
console.log(str.localeCompare("pink"));//0 
console.log(str.localeCompare("red"));//-1 

• localeCompare() 方法是大小写敏感的。例如，"a" 和 "A" 是不同的字符。

• localeCompare() 方法也是重音符号敏感的。例如，"é" 和 "è" 是不同的字符。

• localeCompare() 方法的默认区域设置是当前系统的区域设置。

• localeCompare() 方法返回的数字取决于本地排序规则。不同的语言和不同的区域设置可能会有不同的排序规则。

• localeCompare() 方法不会更改原始字符串。它只是返回一个数字。

本篇文章就先总结这几个开发中常用的字符串方法。操作字符串的值是一般的开发人员必须面临的家常便饭，操作字符串的具体方式有很多，掌握它们对于进行高效的文本处理非常重要。