大家好，今天小编来为大家解答深入浅出：掌握JavaScript核心字符串操作技巧这个问题，很多人还不知道，现在让我们一起来看看吧！
许多方法是兼容的。使用它们时，只需复制并粘贴兼容的代码即可。
首先，我来比较一下数组和字符串方法。我在学习的时候也把它们搞混了。所以我做了一个小小的总结。之后是数组方法和一些示例。如果有一个侧边栏就更好了，这样你可以更清楚地看到它。
数组字符串
切片| slice 子串截取起始索引和结束索引
拼接| substr截取起始索引和截取长度。
连接| concat 是所有连接，一个是连接数组，一个是连接字符串
索引| indexOf 搜索元素是否在里面，返回索引值或-1
加入| split 这是两个反义词，是相互转化的有力工具。
截取方法中，针对字符串有slice/substring/substr 三种方法，针对数组slice/splice 两种方法。
字符串的切片和子串是起始和结束索引，substr是起始索引和长度。
数组的切片需要开始和结束索引，而拼接则需要开始索引和长度查找元素方法。数组和字符串都有indexOf方法，但是字符串多了两个方法，charAt和charCodeAt。
其中，indexOf返回索引，charAt返回索引对应的值，charCodeAt返回对应值的ASCII码值。数组遍历有4种方法，map、every、foreach、some、filter
其中，foreach不能从头停止，遍历一切。如果每一个都遍历了，就会被判断。如果为真，则继续遍历下一个。如果是假的，就会跳出来。 Map是在遍历的同时进行操作。有的返回一个布尔值，匹配则表示true，不匹配则表示false。过滤器返回一个由匹配元素组成的数组。要添加数组元素，请在前面取消移动并在后面推入。
要删除数组元素，请在前面移动并在后面弹出。数组和字符串具有concat 方法。每个都与自己的相关。如果是数组则连接数组，如果连接字符串则连接字符串。更重要的两个是在数组和字符串之间。两种转换方法
join是将数组转为字符串，split是将字符串转为数组。
字符串
查找字符串
charAt(返回字符)
str.charAt(index)charAt() 方法返回字符串中的指定字符。
索引为0 ~ str.length-1。如果指定的索引值超出此范围，将返回空字符串。
输出字符串中不同位置的字符
var anyString="美丽新世界";
console.log("索引0 为"" + anyString.charAt(0) + """);
console.log("索引1 为"" + anyString.charAt(1) + """);
console.log("索引2 为"" + anyString.charAt(2) + """);
console.log("索引3 为"" + anyString.charAt(3) + """);
console.log("索引4 为"" + anyString.charAt(4) + """);
console.log("索引999 是"" + anyString.charAt(999) + """);
//输出
//索引0 是"B"
//索引1 是"r"
//索引2 是"a"
//索引3 是"v"
//索引4 是"e"
//index 999 is ""
charCodeAt(返回ASCII)
str.charCodeAt(index)返回索引对应的字符的ASCII表对应的值，0-65535之间的整数，超出范围则返回NaN。
index : 0 ~ length-1，如果不是数值则默认为0
"ABC".charCodeAt(0) //返回65
indexOf(返回索引)
str.indexOf(searchValue[, fromIndex])searchValue 表示正在搜索的值的字符串
fromIndex 可选。
fromIndex 0 搜索整个字符串（就像传入0 一样）。如果fromIndex=str.length，则该方法返回-1。如果要搜索的字符串是空字符串，则返回str.length 以查找第一个元素。找不到位置，返回-1
"你好苹果".indexOf("你好"); //返回0
"你好苹果".indexOf("Heloo"); //返回-1
"你好苹果".indexOf("苹果", 0); //返回6
"你好苹果".indexOf("苹果", 6); //返回6
"你好苹果".indexOf("", 10); //返回10
"你好苹果".indexOf("", 11); //返回10
//区分大小写
"Hello apple".indexOf("hello") //返回-1
//检查某个字符串是否存在
"你好苹果".indexOf("你好") !==-1; //真的
"你好苹果".indexOf("heloo") !==-1; //false 使用indexOf统计某个字母在字符串中出现的次数
var str="生存还是毁灭，这就是问题所在。";
//数数
变量计数=0；
//判断str中是否有e元素
var pos=str.indexOf("e");
//如果有e元素，则循环
while (pos !==-1) {
//计数加一
计数++；
//从索引开始求e加1
pos=str.indexOf("e", pos + 1);
}
控制台.log(计数); //显示4
lastIndexOf(返回索引)
str.lastIndexOf(searchValue[, fromIndex])searchValue代表正在搜索的值
fromIndex 是从后面开始查找的。
默认值为str.length。如果为负数，则被视为0。如果fromIndex str.length，则fromIndex 被视为str.length。如果没有找到则返回值为-1。找到的索引是从前往后的。
"canal".lastIndexOf("a") //返回3
"canal".lastIndexOf("a",2) //返回1
"canal".lastIndexOf("a",0) //返回-1
"canal".lastIndexOf("x") //返回-1
截取字符串
slice(索引)
str.slice(beginSlice[, endSlice])beginSlice 起始字符索引，如果是复数，则strLength + beginSlice
endSlice 结束字符索引。可选，如果省略则直接跳到最后。如果是负数，就是strLength + endSlice。
提取字符串并返回字符串，包括beginSlice，不包括endSlice
使用slice() 创建一个新字符串
var str1="早晨即将到来。";
//从第五个开始，到倒数第二个结束
var str2=str1.slice(4, -2); //返回“早晨来临”
var str2=str.slice(-3); //返回“我们”。
var str2=str.slice(-3, -1); //返回“我们”
var str2=str.slice(0, -1); //返回“早晨即将到来”
控制台.log(str2); //OUTPUT: 早晨来临
substring(索引)
str.substring(indexStart[, indexEnd])indexStart 起始索引， 0 ~ str.length
indexEnd 结束索引，可选。 0 ~ str.length，如果省略，则到达字符串末尾
如果两个参数小于0或NaN，则将其视为0，如果大于length，则将其视为长度。如果start大于end，则结果与参数交换相同。
str.substring(1, 0)==str.substring(0, 1)
从头到尾截取字符串并返回一个新数组
var anyString="Mozilla";
//输出“莫兹”
console.log(anyString.substring(0,3));
console.log(anyString.substring(3,0));
console.log(anyString.substring(3,-3));
console.log(anyString.substring(3,NaN));
console.log(anyString.substring(-2,3));
console.log(anyString.substring(NaN,3));
//输出"lla"
console.log(anyString.substring(4,7));
console.log(anyString.substring(7,4));
//输出""
console.log(anyString.substring(4,4));
//输出“Mozill”
console.log(anyString.substring(0,6));
//输出“Mozilla”
console.log(anyString.substring(0,7));
console.log(anyString.substring(0,10));替换字符串的子字符串
//本示例末尾调用的函数将“美丽新世界”转换为“美丽新网络”
函数replaceString(oldS, newS, fullS) {
//将字符串fullS 中的oldS 替换为newS
for (var i=0; i fullS.length; i++) {
if (fullS.substring(i, i + oldS.length)==oldS) {
fullS=fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length);
}
}
返回完整的S；
}
ReplaceString("世界", "网络", "美丽新世界");
//需要注意的是，如果oldS是newS的子串，会导致死循环。例如，尝试将“World”替换为“OtherWorld”。更好的做法如下：
函数replaceString(oldS, newS,fullS){
return fullS.split(oldS).join(newS);
}
//使用replace
substr(长度)
str.substr(start[, length])start开始提取字符位置比较容易。如果为负，则查看strLength + start
length 可选，要提取的字符数。不要写到最后
返回新字符串
var str="abcdefghij";
console.log("(1,2):" + str.substr(1,2)); //(1,2): 公元前
console.log("(-3,2): " + str.substr(-3,2)); //(-3,2): 你好
console.log("(-3): " + str.substr(-3)); //(-3): hij
console.log("(1):" + str.substr(1)); //(1): bcdefghij
console.log("(-20, 2): " + str.substr(-20,2)); //(-20, 2): ab
console.log("(20, 2): " + str.substr(20,2)); //(20, 2):兼容，微软的JScript不支持负开始索引
//仅当substr 函数被破坏时运行
if ("ab".substr(-1)!="b")
{
/**
* 获取字符串的子串
* @param {integer} start 子字符串的起始位置
* @param {integer} length 返回多少个字符
* @return {字符串}
*/
String.prototype.substr=函数(substr) {
返回函数（开始，长度）{
//我们是否得到了一个负数的开始，计算它是多少
//从字符串的开头开始
if (start 0) start=this.length + start;
//调用原函数
返回substr.call(this, 开始， 长度);
}
}(String.prototype.substr);
}
转换大小写
toLocaleUpperCase
str.toLocaleUpperCase()返回从小写转换为大写的字符串
console.log("alphabet".toLocaleUpperCase()); //"ALPHABET"
toLocaleLowerCase
str.toLocaleLowerCase()返回从大写转换为小写的字符串
console.log("ALPHABET".toLocaleLowerCase());
//"字母"
console.log("简体中文zh-CN || zh-Hans".toLocaleLowerCase());
//"简体中文zh-cn || zh-hans"
替换字符串
replace(生产环境不建议)
str.replace(regexp|substr,newSubStr|function)正则表达式常规对象或其文字在执行全局替换时必须具有g 标志
substr 要替换的字符串
newSubStr 要替换的新字符串（可以插入特殊字符串）
|变量名|所代表的价值|
| $$ |插入“$”|
| $ |插入匹配的子字符串|
| $` |将内容插入到当前匹配的子串| 的左侧
| $"|将内容插入到当前匹配子串的右侧|
| $n |如果n是第一个参数的正则对象，并且是小于100的非负整数，则插入与第n个括号|匹配的字符串
function 是创建新字符串的函数。函数的返回值是替换后的内容，但不能使用特殊的替换参数。
返回值是被替换的新字符串，本身不会改变。
//以下示例将newString "abc12345#$*%" 更改为"abc - 12345 - #$*%"
函数替换器（匹配，p1，p2，p3，偏移量，字符串）{
//p1 为非数字，p2 为数字，p3 为非字母数字
return [p1, p2, p3].join(" - ");
}
var newString="abc12345#$*%".replace(/([^d]*)(d*)([^w]*)/,replacer);使用正则表达式
//Replace() 使用正则表达式并忽略大小写标记。
var str="那是圣诞节前一天晚上.";
var newstr=str.replace(/xmas/i, "圣诞节");
控制台.log(newstr); //那是圣诞节前一天晚上.使用全局并忽略选项
//在下面的示例中，正则表达式包含全局替换(g) 和忽略大小写(i) 选项，这会导致替换方法将所有出现的"apples" 替换为"oranges"。
var re=/苹果/gi;
var str="苹果是圆的，而且苹果是多汁的。";
var newstr=str.replace(re, "橘子");
控制台.log(newstr);
//橙子是圆的，橙子是多汁的。交换字符串中的两个单词
//下面的例子演示如何交换字符串中两个单词的位置。该脚本使用$1 和$2 而不是替换文本。
var re=/(w+)s(w+)/;
var str="约翰·史密斯";
var newstr=str.replace(re, "$2, $1");
//史密斯、约翰
控制台.log(newstr);使用内联函数修改匹配的字符
//将所有出现的大写字母转换为小写，并在匹配位置前添加连字符。在返回替换的字符串之前添加匹配元素非常重要。
//在返回之前，替换函数允许将匹配的片段作为参数，并将其与连字符连接起来作为新的片段。
函数样式格式（名称）{
函数较低（匹配）{
return "-" + match.toLowerCase();
}
return name.replace(/[A-Z]/g, lower);
}
styleFormat("borderTop"); //返回"边框顶部"
//因为我们要在最后的替换中对匹配结果进行进一步的变换，所以必须使用函数。这迫使我们在使用toLowerCase() 方法之前进行评估。如果我们尝试在没有函数的情况下进行匹配，则使用toLowerCase() 方法将不起作用。
var newString=propertyName.replace(/[A-Z]/g, "-" + "$".toLowerCase()); //错误报告
//这是因为$.toLowerCase() 将首先被解析为字符串文字（这会产生相同的$）而不是模式。
拼接字符串
concat
str.concat(string2, string3[, ..., stringN])将一个或多个字符串与原字符串组合形成一个新字符串并返回
强烈建议使用赋值运算符（+、+=）而不是concat 方法
var hello="你好，";
console.log(hello.concat("凯文", "祝你有美好的一天。"));
/* 你好，凯文，祝你今天愉快。 */测试比较(+concat+join) 建议使用concat.png
比较字符串
locateCompare
referenceStr.localeCompare(compareString[, locales[, options]])referenceStr引用字符串
CompareStr 比较字符串
locales是指比较的语言，选项比较标准。很多浏览器不支持这两个参数，所以不使用。
如果引用字符串在比较字符串之前，则返回-1；如果引用字符串在比较字符串之后，则返回1。相同位置返回0（由于浏览器不同，只关注优缺点）
//逐个字符比较
"a".localeCompare("c"); //-2 或-1 （或其他负值）
"检查".localeCompare("反对"); //2 或1（或其他正值）
"a".localeCompare("a"); //0 检查浏览器对扩展参数的支持
//区域设置和选项参数尚未被所有浏览器支持。检查是否支持，使用"i"参数判断是否抛出异常RangeError
函数localeCompareSupportsLocales() {
尝试{
"foo".localeCompare("bar", "i");
} 捕获(e) {
return e.name==="RangeError";
}
返回假；
}
去空格
trim
str.trim()去掉字符串两端的空白字符，返回一个新字符串
var orig=" foo ";
console.log(orig.trim()); //"foo" 兼容性问题，在IE8 及以下版本中不可用
if (!String.prototype.trim) {
String.prototype.trim=function () {
return this.replace(/^[suFEFFxA0]+|[suFEFFxA0]+$/g, "");
};
}
切割字符串
split(数组)
str.split([separator[, limit]])将字符串对象分割成字符串数组，[]表示参数可选
如果str 是空字符串，则split 返回包含空字符串的数组而不是空数组。
分隔符可以是字符串或正则表达式
如果没有分隔符，则返回整个字符串的数组形式。如果分隔符为空字符串，str将返回原字符串中每个字符的数组形式。如果有字符串和表达式，则匹配字符串。分隔符将从字符串中移除，根据字符串分隔成子字符串，并放入数组limit 中。一个整数用于限制返回的分割片段的数量。 split 方法仍然会分割每个匹配的分隔符，但返回的数组只会拦截最多有限的元素。
"Webkit Moz O ms Khtml".split( " " )
//["Webkit", "Moz", "O", "ms", "Khtml"] 限制返回值中分割元素的数量
var myString="你好世界。你好吗？";
var splits=myString.split(" ", 3);
console.log(分割);
//["Hello", "World.", "How"] length=3 捕获括号
//分隔符包含捕获括号，则其匹配结果将包含在返回的数组中
var myString="你好1 个字。第2 句。";
var splits=myString.split(/(d)/);
文章到此结束，如果本次分享的深入浅出：掌握JavaScript核心字符串操作技巧和的问题解决了您的问题，那么我们由衷的感到高兴！
【深入浅出：掌握JavaScript核心字符串操作技巧】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
终于找到这篇文章了，我一直都不太清楚JavaScript里有哪些常见的字符串方法.
有16位网友表示赞同！
我要学做前端开发，现在开始学习一下这些字符串方法吧.
有5位网友表示赞同！
感觉掌握这些方法可以让我更方便地处理文本数据。
有12位网友表示赞同！
以前总是把很多简单操作都写得超级复杂，也许知道这些方法能帮到我!
有11位网友表示赞同！
我要去看看这篇文章里面有哪些我还没用过的字符串方法.
有17位网友表示赞同！
学习一下吧，总比每次遇到需要处理字符串的时候都去找资料省钱时间
有14位网友表示赞同！
最近在项目中遇到了字符串操作问题，正好来看看这里有没有相关的方法.
有13位网友表示赞同！
了解了这些常用字符串方法之后，代码写起来会不会更快啊？
有20位网友表示赞同！
感觉这些方法还是挺管用的，以后要用的时候就来回顾一下这篇介绍。
有8位网友表示赞同！
以前总是觉得字符串操作很难，现在看来只要掌握好方法就还好嘛.
有9位网友表示赞同！
这篇文章很全面，应该能让我把常用的字符串方法都学会了
有12位网友表示赞同！
学习新技能真不容易，但看到结果的时候还是很有成就感的！
有13位网友表示赞同！
看完这篇文章后，我觉得自己的编程能力又提升了一点。
有6位网友表示赞同！
原来JavaScript也有这么多强大的 字符串方法!
有17位网友表示赞同！
以后遇到字符串问题就不用到处找资料了，直接参考这篇文章。
有18位网友表示赞同！
感觉学习这些方法就像学习新的工具一样，会让我在编程中更加得心应手。
有7位网友表示赞同！