字符串和数组可能是我们经常需要去处理的数据类型了,今天我们就来先说说字符串有哪些常用的处理方法。至于数组,我们放到下一篇文章去讨论;
length
返回字符串长度
var str = 'hello world!'
console.log(str.length) // 输出 12
search
查找字符串,返回索引值,没有返回-1
indexOf
通过传入的字符从左到右开始对字符串进行查找,返回所查找字符在该字符串中第一次出现(最左边)的索引值,如果该字符串中没有包含此字符,则返回-1
console.log(str.indexOf('l')) // 输出2 索引 0 开始
lastIndexOf
lastIndexOf与indexOf相反,该方法是从右到左开始查找,返回最后出现(最右边)的索引值,同样的,没有查找到则返回-1
console.log(str.lastIndexOf('l')) // 输出9 索引 0 开始
substr
该方法返回字符串中的一个子串,传入参数第一个是起始位置,第二个是截取的长度
var subStr = str.substr(2,6); // 2表示从索引为2的字符开始,6表示截取出来的字符串的长度
console.log(subStr) // 输出 "llo wo"
substring
该方法返回字符串中的一个子串,传入参数是起始位置和结束位置(不包括结束位置的字符)
var subStr = str.substring(1,6); // 1表示从索引为1的字符开始,6表示截取到索引为6的字符
console.log(subStr) // 输出 "ello "
对比substr可以看出,第二个参数传入的都是6,但一个返回的子串长度是6,一个是5,这与索引值从0开始有关
注意,一般我们写参数时常常把起始位置作为第一个参数,结束位置作为第二个参数,但也不能避免有将两个参数位置颠倒的情况,substring会默认把小的一个数作为起始位置,大的作为结束位置,所以使用substring时,不用担心参数位置问题,但slice就不一样,下面我们会说到;
var subStr = str.substring(6,1);
console.log(subStr) // 输出 "ello "
slice
该方法与substring相同,传入的第二个参数也是截取的结束位置(不包括结束位置的字符)
var subStr = str.substring(1,6); // 1表示从索引为1的字符开始,6表示截取到索引为6的字符
console.log(subStr) // 输出 "ello "
上面说substring时,我们说substring方法里的参数是不用特意去控制第一个参数是起始位置还是结束位置。但slice方法就不行,得严格按照第一个参数为起始位置,第二个参数为结束位置去传入,否则就会返回一个空字符串
split
该方法是根据传入的参数将字符串分割成为一个数组
var arr = str.split("");
console.log(arr); // [ "h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d","!"]
var arr = str.split(" ");
console.log(arr); // [ "hello", "world!" ]
replace
字符串 的 replace() 方法执行的是查找并替换的操作。它将在字符串中查找与 regexp 相匹配的子字符串,然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g,那么 replace() 方法将替换所有匹配的子串。否则,它只替换第一个匹配子串。
var reg = /hello/
console.log(str.replace(reg,'HELLO')) //输出 "HELLO world!"
toUpperCase
将整个字符串转成大写字母。
console.log(str.toUpperCase()) // "HELLO WORLD!"
toLowerCase
将整个字符串转成小写字母。
var str = 'HEllo wOrld!'
console.log(str.toLowerCase()) // "hello world!"
concat
这个方法大家可能知道它能够把两个或多个数组给拼接起来,不过用到字符串上也同样可行的
var str1 = 'hello ';
var str2 = 'world!';
console.log(str1.concat(str2)) // 输出 "hello world!"
charAt
根据传入的索引参数,返回字符串中该索引值对应的字符
var str = 'hello world!';
console.log(str.charAt(4)) // 'o'
charCodeAt
根据传入的索引参数,返回字符串中该索引值对应的字符Unicode 编码。这个返回值是 0 - 65535 之间的整数。
方法 charCodeAt() 与 charAt() 方法执行的操作相似,只不过前者返回的是位于指定位置的字符的编码,而后者返回的是字符子串。
var str = 'hello world!';
console.log(str.charAt(4)) // 111
如果传入的参数是负数或大于等于字符串的长度,则 charCodeAt() 返回 NaN。
trim
去除字符串首尾空格,返回一个新的字符串,不会改变原有字符串;
到此字符串的常用方法就介绍完了,当然还有一些没有说到的,常与正则一起使用的 match,search等
ES6 新增方法
includes
这是ES6新增的一个字符串处理方法,一般使用在判断字符串中是否包含某个字符或某个字符串;
var str = 'zheshiyigeceshi';
str.includes('shi') // 返回true
str.includes('oi') // 返回false
startsWith / endsWith
该方法判断字符串是否以某个字符或字符集开头(结尾);返回布尔值;
repeat
复制字符串,该方法返回一个新的字符串,不改变原字符串
模板字符串
利用反引号 ``,${}里面编写js 合法表达式
var className = "red";
var str = `<ul>
<li class="${className}"></li>
<li></li>
</ul>`;