操作字符串的方法
子曾经曰过,这是基本功,就和练武的马步一样!
字符串的基本方法
一、原字符串不变
1.charAt
释义:返回在指定位置的字符;
参数:下标索引 index;
原字符串:不变;
返回值:返回在指定位置的字符。
var str = "abc"; str.charAt(1); // "b" str[1]; // "b"--------------用中括号结果是一样的
charAt 和 [ ] 有什么区别? 返回值 和 兼容性
- 使用string[index]的方式,对于超出字符index范围的,会返回undefined
而使用charAt(index)的方式,对于超出范围的会返回一个空的字符串。 - tring[index]的方式在IE6~8下会返回 undefined, 也就是IE6~8 不兼容此方法。
而charAt(index)经测试,在IE6~8下也能够正常返回值。
- 使用string[index]的方式,对于超出字符index范围的,会返回undefined
2.concat
释义:连接两个或更多字符串,并返回新的字符串;
参数:和原字符串连接的多个字符串;
原字符串:不变;
返回值:新字符串。
var str = "abc"; str.concat("def"); // "abcdef" str+"abc"; // "abcdef"
concat 和 + 有什么区别?
- concat()是方法,+是表达式。
- concat()只能字符串拼接字符串,+号可以连接不同数据类型。
3.substring
释义:提取字符串中两个指定的索引号之间的字符,包头不包尾。
参数:
indexStart,一个 0 到字符串长度之间的整数。
indexEnd,可选。一个 0 到字符串长度之间的整数。
如果参数小于0或NaN,会被当做0。
如果 indexStart 大于 indexEnd,则 substring 的执行效果就像两个参数调换了一样。
例如,str.substring(1, 0) == str.substring(0, 1)。原字符串:不变;
返回值:新字符串。
var str="abcdef"; str.substring(1,4); // "bcd"
4.substr
释义:从起始索引号提取字符串中指定数目的字符;
参数:
start,开始提取字符的位置。如果为负值,则被看做 strLength + start
length,可选。提取的字符数。省略则会提取到字符串末尾。原字符串:不变;
返回值:提取的新字符串。
var str="abcdef"; str.substr(1,4); // "bcde" ==> 从下标1开始,提取4个 str.substr(1); // "bcdef" ==> 省略 length默认提取到最后 str.substr(-1); // "f" ==> start设为负数,则被看做str.length+(-1)就是最后一个开始 str.substr(1,0); // "" ==> length为0,就是提取0个,返回空字符串 str.substr(7); // "" ==> start大于str.length,返回空字符串
5.slice:
释义:提取一个字符串的一部分,并返回一新的字符串,包头不包尾。
参数:
beginIndex,开始索引,如果为负值,则被看做 strLength + beginIndex
endIndex,结束索引,如果省略,则会提取到字符串末尾。如果为负值,则被看做 strLength + endIndex。
如果 beginIndex大于 endIndex,则 slice的执行效果不会像substring一样调换参数,而是返回空字符串。原字符串:不变;
返回值:新字符串。
var str="abcdef"; str.slice(1,4); // "bcd" ==> 从下标1开始提取,到下标4,不包括下标4 str.slice(1); // "bcdef" ==> 省略 endIndex 默认提取到最后 str.slice(-1); // "f" ==> beginIndex设为负数,则被看做str.length+(-1)就是最后一个开始 str.slice(1,-1); // "bcde" ==> endIndex设为负数,则被看做str.length+(-1),到最后一个结束,且不包含最后一个 str.slice(4,2); // ""==> beginIndex大于endIndex返回空字符串 str.substring(4,2); // "cd" ==> substring会调换参数
区别:
- substring和slice区别是下标参数是否能为负数,前者参数为负会被当做0,后者参数为负数会被当做str.length+该负数
- substr和另外两个区别就是substr的参数二为length长度,而另外两个的参数二都为结束下标,并且都不包含
6.trim
释义:去除字符串两边的空格,内部空格不会去除;
参数:无;
原字符串:不变;
返回值:新字符串。
var str = " abc "; str.trim(); // "abc"; str.replace(/\s/g, "")//用正则去除所有空格
7.toLowerCase、toUpperCase
- 释义:全部转换成小、大写字母;
- 参数:无;
- 原字符串:不变;
- 返回值:新字符串。
8.indexOf、lastIndexOf
释义:返回某个指定的字符串值在字符串中首次(最后)出现的位置,如果没有,返回-1;
参数:
searchValue,表示被查找的字符串值(必须)
fromIndex ,开始查找的下标位置(可选),省略默认从0下标开始。原字符串:不变;
返回值:返回指定值的第一次出现的索引; 如果没有找到 -1。
var str="abcdef"; str.indexOf("a"); // 0 str.indexOf("a",1); // -1 ==> 从下标1开始找"a",找不到,返回-1 str.indexOf("ab"); // 0 str.indexOf("g"); // -1
9.split
释义:把字符串分割为字符串数组;
参数:
separator(可选),使用该分隔符来分割字符串;
limit(可选),指定返回的数组的最大长度。原字符串:不变;
返回值:一个字符串数组。
// 字符串没有分隔符 let str = "abc"; str.split("") // ['a', 'b', 'c']; // 相当于 [...str] // ['a', 'b', 'c']; ==> es6 扩展运算符 Array.from('abc'); // ['a','b','c']; es6 数组方法 // 字符串有分隔符 var str="a,b,c,d,e,f"; str.split(); // ["a,b,c,d,e,f"] ==> 不传会返回的数组内是整个字符串 str.split(","); // ["a", "b", "c", "d", "e", "f"] ==> 传 "," 会返回的数组内是以","分割的字符串 str.split(",",3); // ["a", "b", "c"] ==> 传入第二个参数,限定了返回数组的内部字符串的长度。 str.split("c"); // ["a,b,", ",d,e,f"] ==> 以"c"作为分隔符,分割字符串。
10.replace
释义:在字符串中查找匹配的子串, 并替换与正则表达式匹配的子串;
参数:
searchvalue,必须。规定子字符串或要替换的模式的 RegExp 对象。
newvalue,必需。一个字符串值。规定了替换文本或生成替换文本的函数。原字符串:不变;
返回值:新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
// 可用做删除固定的字符,替换为空即可 var brand='十大品牌'; brand.replace("品牌",""); // "十大"; // 替换 var str="aAa"; str.replace("a","b"); // "bAa" ==> 只能替换第一个 str.replace(/a/g,"b"); // "bAb" ==> 执行全局替换 str.replace(/a/gi,"b"); // "bbb" ==> 执行全局替换,且忽略大小写 // 正则表达式包含有全局替换(g)和忽略大小写(i)的选项
ECMAScript规定,replac()方法的参数replacement可以是函数而不是字符串。在这种情况下,每个匹配都调用该函数,它返回的字符串将替换文本使用。第一个参数表示匹配到的字符,第二个参数表示匹配到的字符最小索引位置(RegExp.index),第三个参数表示被匹配的字符串(RegExp.input)。
ES6字符串的拓展方法
1.includes()
返回布尔值, 表示是否找到了参数字符串。
"Hi".indexOf("H") !== -1;// true // 通过返回元素的下标是否为-1来判断是否存在 "Hi".includes("H");// true // 语义化十足
2.startsWith() / endsWith()
返回布尔值, 表示参数字符串是否在原字符串的头部 / 尾部。
"Hi".startsWith("H");// true "Hi".endsWith("i");// true
3.repeat
- repeat(n)方法返回一个新字符串,表示将原字符串重复n次。
"Hi".repeat(3);// HiHiHi
4.padStart、padEnd
- padStart()用于头部补全,padEnd()用于尾部补全。
格式:padStart(minLen,str)
padStart和padEnd一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。 - 用途一:为数值补全指定位数。也就是补零(时间补零,之前是判断这个数是否大于9,然后拼接一个”0″)
'1'.padStart(2, '0') // "01"
- 用途二:提示字符串格式
let a='12'.padStart(10, 'YYYY-MM-DD') // a="YYYY-MM-12"
5.模版字符串
以前:传统字符串拼接使用”逗逗加加”经常出错,而且十分繁琐不便。
现在:es6 神器来了。
模板字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量,用${变量};而且大括号内部可以放入表达式,进行运算;还能引用对象属性;还能函数调用。
- ${}:大括号内部能放
1.变量
2.表达式
3.对象属性
4.函数调用
5.模板字符串(也就是嵌套)
6.String.raw(好像没什么用)
- String.raw方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。
7.[…str] 字符串转数组
- 通过扩展运算符
let str = "abc"; [...str] // ['a', 'b', 'c']; // 相当于 str.split("") // ['a', 'b', 'c'];