本文章讲解JavaScript字符串的方法，包括声明字符串，字符串的方法，检索字符，查找字符的位置，字符串的截取，并且配合案例进行解释。代码注释有详解。
目录
lastIndexOf()和IndexOf()的区别与相同点
利用lastIndexOf()或IndexOf()实现字符串的分离去重
subString()，slice()，substr()三者比较
字符串的声明
声明：var
var str='123'
var str1=String('1,2,3')
var str2= new String('1,2,3')注意，使用new String声明的字符串是object类型的，其余两个是string类型。
简单的字符串方法
获取字符串的长度：字符串.length
获取字符串中的字符：字符串[下标]， 字符串.charAt(下标)
获得字符串终某个字符的ascii码值：字符串.charCodeAt(下标)
案例：
var str = '终日看山不厌山'
console.log(str[2]);
console.log(str.charAt(2));
console.log(str.charCodeAt(2));输出结果：
console.log('a'.charCodeAt());//小写字母 97-122
console.log('1'.charCodeAt());//数字 48-57
// 大写字母 65-90输出结果
检索字符，查找字符的位置
indexOf
语法：
indexOf（'查找的字符'，index）
'查找的字符'：要查找的字符
index：下标，可选参数，表示从从下标几开始查找
返回值是所要查找的字符首次出现的位置，返回其下标
找到返回字符正确的下标，找不到就返回-1
var str3 = '终日看山不厌山'
console.log(str3.indexOf('山', 4));上面的代码就是从下标为4的字符，也就是从“不”开始往后寻找山这个字符，打印结果是6。
var str='终日看山不厌山'
console.log(str.indexOf('1'));//-1上面代码在str中寻找“1”这个字符，很明显找不到，结果就会输出 -1。
使用indexOf检测字符串中某个字符的个数
使用indexOf检测字符串"abcabcaa"中，字符a的数量。
代码注释有详解
function indexs(str, val) {//封装一个函数
var num = 0
var index = str.indexOf(val)//把indexOf的值赋给index
while (index !== -1) {//如果index不为-1，说明找到了要检索的字符
num++//找到一个num就+1
index = str.indexOf(val, index + 1)//从找到字符的位置的下一个字符开始继续查找
}
console.log(num);//输出，返回num
return num
}
indexs('abcabcaa', 'a')//调用函数并传递参数输出结果为4
使用indexOf遍历字符串
我们可以结合循环和indexOf来遍历字符串
for( var i=0;i<str.length;i++){
console.log(str[i]);
}这样我们就可以检索字符串中每个字符出现的次数
如下：
var str = '终日看山不厌山，买山终待老山间'
var obj = {}
for (var i = 0; i < str.length; i++) {
// var a= indexs(str,str[i])
// obj[str[i]]=a
var a = str[i]
if (obj[a]) {
obj[a] += 1
} else {
obj[a] = 1
}
}
console.log(obj);
function indexs(str, val) {
var num = 0
var index = str.indexOf(val)
while (index !== -1) {
num++
index = str.indexOf(val, index + 1)
}
// console.log(num);
return num
}结果：如图打印了一个object，里面显示了每个字符出现了几次。
lastIndexOf()
语法：
lastIndexOf（'查找的字符'，index）
从后往前查找，返回字符首次出现的位置下标
举例：
var str='123123'
// lastindexOf
console.log(str.lastIndexOf('2'));
console.log(str.indexOf('2'));输出为4和1。
举例：
var str='123123'
// lastindexOf
console.log(str.lastIndexOf('2',3));输出结果为1。
lastIndexOf()和IndexOf()的区别与相同点
区别：indexOf从前往后查找，lastIndexOf从后往前查找
相同点：都可以检索字符，查找不到都会返回-1
利用lastIndexOf()或IndexOf()实现字符串的分离去重
我们可以利用lastIndexOf()或IndexOf()实现一个字符串的字母与数字分离，然后把重复的字符串去除。需要使用charCodeAt()方法把字符变成ASCII码来判断是数字还是字母。
例如一个字符串："dwadwa5d4wa6d45WDAADWAa1da354d3aw5431"
经过分离去重后为" dwaWDA"和" 54613"
代码如下，注释有详解。
function fenkai() {
var zm = " "//声明空的字符串来为分离后的字符串做准备
var sz = " "//同上
var str = 'dwadwa5d4wa6d45WDAADWAa1da354d3aw5431'//声明一个字符串
for (var i = 0; i < str.length; i++) {//遍历字符串
var a = str[i].charCodeAt()//把字符串转为ASCII码
// console.log(a)
if (a >= 97 && a <= 122 || a >= 65 && a <= 90) {//通过ASCII码判断是否是字母
//indexOf结果为-1，说明字母在新的字符串中不重复
if (zm.indexOf(str[i])==-1) {
zm += str[i]//把str里面的字符加入到字符串zm中
}
} else if (a >= 48 && a <= 57) {//通过ASCII码判断是否是数字
if (sz.indexOf(str[i])==-1) {//同上
sz += str[i]//同上
}
}
}
console.log(zm);
console.log(sz);
}
fenkai()实现效果：
字符串的截取
subString()
语法：
subString（start,stop）
start:开始位置
stop：结束位置，可选参数，可以不写，如果不写默认截取开始位置后面的所有字符
举例：
var str='中日看山不厌山'
console.log(str.substring(0,2));subString()的多个情况分析
当subString()里面的数值出现多个情况时候会怎么样，现在在下面列举subString()的多个情况，并且在注释加以讲解。
var str = '终日看山不厌山'
//普通情况
console.log(str.substring(0, 2));
//从下标1截取到最后
console.log(str.substring(1));
//当开始位置大于结束位置时，交换位置
console.log(str.substring(4, 2));
//当参数为负数的时候转化为0
console.log(str.substring(-4));
//当结束位置为负数的时候，先转化为0，再交换位置
console.log(str.substring(2,-3));
//相当于截取0，0，截取不到东西
console.log(str.substring(-2,-3));
//结束位置超过字符串长度，则从开始位置截取到最后
console.log(str.substring(2,13));slice()
语法：
slice（start,stop）
start:开始位置
stop：结束位置，可写可不写
slice()讲解
在注释中加以详解
var str = '终日看山不厌山'
//正常情况
console.log(str.slice(0,3));
//从下标2开始截取到字符串结尾
console.log(str.slice(2));
// 当开始位置大于结束位置时,不交换位置，截取为空
console.log(str.slice(4,2));
// 当参数为负数的时候，先加字符串的长度，在截取
console.log(str.slice(-3,7));
// 相当于
console.log(str.slice(4,7));
// 当结束位置大于字符串的长度时，截取到字符串的最后一位
console.log(str.slice(4,10));
// 当参数为负数的时候，先加字符串的长度，在截取
console.log(str.slice(2,-7));substr()
语法：
substr（start,length）
start:开始位置
length:截取的长度，可不写
slice()讲解
在注释中加以详解
var str='1231dsgsdg'
//从下标为2的开始截取，截取到最后结果为31dsgsdg
console.log(str.substr(2));
//从下标2的开始截取2位，结果为31
console.log(str.substr(2,2));
//截取长度大于字符串长度就截取到字符串最后
console.log(str.substr(2,20));//31dsgsdg
//截取长度为负数，则截取不到东西
console.log(str.substr(2,-3));//subString()，slice()，substr()三者比较
三者语法，两个参数第一个是开始位置，第二个参数，subString()，slice()是结束位置，substr()是截取长度。第二个参数都可以不写。
subString()参数大小，开始位置大于结束位置，就会换位置。
subString()会把负数转化为0，slice()当参数为负数的时候，先加字符串的长度，在截取。substr()的截取长度为负数，则截取不到东西。
字符串截取案例：实现一段文字的展开与收缩
我们在日常阅读网页上的文章的时候，经常看见一篇文章收缩起来，我们点击"展开"的时候，才展示出所有文字，原来的"展开"变成了"收缩"。点击收缩，文字又收缩变成了原来的状态。
我们可以利用字符串截取的办法实现这个功能。
代码如下：
html：
<div id="content">
</div>
<p id="pp">点击展开</p>JavaScript：
var con = document.getElementById('content')//获取div
//声明一个字符串
var str = '10月26日，国际地质科学联合会（IUGS）在西班牙公布了全球首批100个地质遗产地名录。中国有7个地质遗产地入选，由此成为本批次入选最多的国家之一。中科院院士、南京大学生物演化与环境科教融合中心教授沈树忠与IUGS地质遗迹委员会副主席、中国地质大学（北京）教授张建平共同代表IUGS，在中国的浙江长兴进行了同步发布。中国入选首批百个IUGS地质遗产地名录的7个地质遗产地分别是：长兴煤山二叠纪 / 三叠纪生物大灭绝和“金钉子”（国家级地质遗迹保护区）内蒙古巴丹吉林沙漠必鲁特高大沙山和湖泊（世界地质公园）香港早白垩世酸性火成岩柱状节理云南石林喀斯特云南澄江寒武纪化石产地和化石库（世界自然遗产地和国家地质公园）藏南绒布峡谷滑脱构造体系珠峰奥陶纪岩石（中国 / 尼泊尔）它们涵盖了岩石学、构造地质学、地层古生物学、地理学、地貌学等领域。'
var p1 = document.getElementById('pp')//获取p标签
con.innerText = str.substr(0, 180)//把字符串展示在div里面
p1.onclick = function () {//p标签的点击事件
if (p1.innerText == "点击展开") {//判断p标签的内容是否为"点击展开"
con.innerText = str.substr(0)//截取字符串，从0开始截取全部，相当于展示全部内容
p1.innerText = "点击收缩"//p标签内容显示"点击收缩"
} else {
con.innerText = str.substr(0, 180)//截取180个字符
p1.innerText = "点击展开"//p标签内容显示"点击展开"
}
}效果如下：
收缩状态：
展开状态：
