前端充电站：重温JS字符串方法

方法一：trim

• 能截取字符串首尾的空格，不能截取字符串中间的空格
• 不会对原字符串产生影响，会返回一个新的字符串

var str = " ni hao "; // str.length=8
var str2 = "nihao" // str.length=5
var str3=str.trim()
console.log(str.trim().length)  //6

方法二：toLowerCase/toUpperCase

• 这两个返回的都是一个新字符串，不会影响原有的字符串

var str1 = "A";
var str2 = "a";
console.log(str1.toLowerCase());  // 'a'
console.log(str1); //'A'
console.log(str2.toUpperCase());  // 'A'
console.log(str2); //'a'

方法三：concat

• 返回的是一个新的字符串，不会改变原有的字符串
• 参数可以是多个字符串，以逗号进行间隔
• += 的性能比用 concat 要更好

var str1 = "ni";
var str2 = "hao";
var str3 = "niu";
console.log(str1.concat(str2,str3))  //'nihaoniu'
console.log(str1+str2+str3) 'nihaoniu'

方法四：substr

• substr(start,[length])截取从start位置开始的字符，返回的也是新的字符串
• 并不会改变原有字符串，截取字符的个数如果不填,默认为到该字符串结尾的位置
• 如果超出了length，则默认为到字符串结尾的位置，如果个数(length)是一个负数，则返回空字符串

🤔未来可能被废弃慎用

var str = "nihaoniu";
console.log(str.substr(-5,2));   //'ao'

//当第二个参数length<0时返回的是空字符串
console.log(str.substr(-5, -5)); //''  空字符串
console.log(str.substr(-5, -2)); //''  空字符串

var str2 = str.substr(-5, -5); 
console.log(str);  //'nihaoniu'
console.log(str2); //''  空字符串

方法五：charAt

• 字符串的索引值index(下标)如果说不填，默认为0
• 如果超出str.length或者小于0，那么会返回一个空字符串

var str = "nihaoniu";
console.log(str[1]);   //有兼容问题

str.charAt(index); //解决兼容问题
console.log(str.charAt(-1));  //''  空字符串
console.log(str.charAt(str.length-1)); //'u'

方法六：charCodeAt

• str.charCodeAt(index)用于获取当前字符串的unicode编码(number类型)
• 字符串的索引值index(下标)，如果不给，默认为0
• 如果下标不存在的值，那么会返回给你一个NaN

前提回顾：如果比较字符串，比较的是Unicode编码的大小



var china1 = "中";
var china2 = "文";
console.log(china2.charCodeAt());//(index=0) 20013   
console.log(china1.charCodeAt());//(index=0)  25991

方法七：fromCharCodeAt

console.log(String.fromCharCode(25105, 29233, 20320));

😇方法八：indexof

• str.indexOf(searchValue,[fromIndex])可以用于查找str中是否有对应的字符串
• 如果有返回该字符串第一次出现时候对应的索引值，如果说查找的值不存在，返回一个-1
• fromIndex这个值是一个可选值，不填默认为0
• 如果输入的值小于0，会当做0进行处理
• 如果说超出了索引值的范围，这时候会返回-1

var str = "nihaoniu";
console.log(str.indexOf('ha')); //2
console.log(str.indexOf('vv')); //-1
console.log(str.indexOf('n',1));//5
console.log(str.indexOf('n', -1)); //0
console.log(str.indexOf('n', 50));  //-1

方法九：lastIndexOf

• str.indexOf(searchValue,[fromIndex])可以用于查找str中是否有对应的字符串(从右往左)
• 如果有返回该字符串第一次出现时候对应的索引值
• fromIndex 这个值是一个可选值，不填默认为0
• 如果输入的值小于0，会当做0进行处理
• 如果说超出了索引值的范围，这时候会返回-1

var str= "nihaoniuhhh";
console.log(str.lastIndexOf("h", str.length)); //10
console.log(str.lastIndexOf("ni")); //5
console.log(str.lastIndexOf("h")); //10

😇方法十：split

var str='ni-hao-niu-a';
console.log(str.split());  //如下图

var str='ni-hao-niu-a'
console.log(str.split("-"));  //如下图

方法总结：
决定分隔的字符
该字符的位置会作为分隔点
并且自己是并不在当前数组内的

var str='ni-hao-niu-a';
console.log(str.split(""));  //如下图

方法总结：
如果是"",可以把每一个字符都分隔开来

var str='ni-hao-niu-a';
var str2='bb'
console.log(str.split("a"));  //如下图
console.log(str2.split('b'));  //如下图

方法总结：
如果分隔的字符处在字符串的首尾，则会有一个空字符串

😀彩蛋：
如果想要判断在一个给出的字符串中
该位字符出现的次数可以用split方法
console.log(str2.split('b').length-1) //2

var str='ni-hao-niu-a';
console.log(str.split("", 50));  //如下图

方法总结：
num 可选，决定分隔的数组中的个数
如果说给的值，超过了length
分隔也只会以当前字符串的最大分隔为标准

😇方法十一：slice

• slice(begin,[end])可以截取字符，并返回这个新的字符
• begin指的是截取的起始位置(左闭右包)
• 如果说begin(负数)超过了一定的值,默认就从0开始
• end(可选参数)不填默认到该字符串结尾部分(默认length)
• begin 和 end 是一致的，则会返回空字符串
• 如果说end小于begin，则会返回空字符串(但是subString会倒置)
• 并不会影响原来的字符串，返回一个新的字符串

var str = "nihaoniu";
console.log(str.slice(1)); //'ihaoniu'
console.log(str.slice(-5));//'aoniu'
console.log(str.slice(-51)) //'nihaoniu'
console.log(str.slice(4,0));// ''

var str2 = str.slice(50,100);  
console.log(str2); //''

var str3 = str.slice(50,50);  
console.log(str3); //''

方法十二：subString

- substring(begin,[end])截取两个索引值之间的字符串并且作为一个新的字符串进行返回 （包含begin，但是不包含end）

• 🤔与slice不一样的是end值小于0则会当做0进行处理
• end默认为到该字符串结尾，如果说这个值大于length则会当做length进行处理
• 🤔如果说end大于begin，end就会作为begin，begin就会作为end(倒置)
• 如果begin和end是一致的，则会得到一个空字符串(与slice一样)

var str = "nihaoniu";

console.log(str.substring(1,str.length-1));  //'ihaoniu'

console.log(str.substring(1, 50));  //'ihaoniu'


//会倒置成str.substring(2,5)
console.log(str.substring(5,2));//'hao'


console.log(str.substring(0, 0)); //''

//第二个参数小于0会当成0处理
console.log(str.substring(1, -4)); //'n'


console.log(str.substring(1, 0)); //'n'


console.log(str.substring(0,1)); //'n'


var str2 = str.substring(0, 0) 

console.log(str);  //'nihaoniu'
console.log(str2); //''