操作字符串的方法
子曾经曰过, 这是基本功, 就和练武的马步一样!
字符串的基本方法
一, 原字符串不变
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 下也能够正常返回值.
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'];
- Knowledge changes the mind
来源: http://www.jianshu.com/p/2715bae9e34e