字符串方法整理

操作字符串的方法

子曾经曰过,这是基本功,就和练武的马步一样!

字符串的基本方法

一、原字符串不变

1.charAt

  1. 释义:返回在指定位置的字符;

  2. 参数:下标索引 index;

  3. 原字符串:不变;

  4. 返回值:返回在指定位置的字符。

    var str = "abc";
    str.charAt(1); // "b"
    str[1]; // "b"--------------用中括号结果是一样的
    

    charAt 和 [ ] 有什么区别? 返回值兼容性

    1. 使用string[index]的方式,对于超出字符index范围的,会返回undefined
      而使用charAt(index)的方式,对于超出范围的会返回一个空的字符串。
    2. tring[index]的方式在IE6~8下会返回 undefined, 也就是IE6~8 不兼容此方法。
      而charAt(index)经测试,在IE6~8下也能够正常返回值。

2.concat

  1. 释义:连接两个或更多字符串,并返回新的字符串;

  2. 参数:和原字符串连接的多个字符串;

  3. 原字符串:不变;

  4. 返回值:新字符串。

    var str = "abc";
    str.concat("def"); // "abcdef"
    str+"abc"; // "abcdef"
    

    concat 和 + 有什么区别?

    1. concat()是方法,+是表达式。
    2. concat()只能字符串拼接字符串,+号可以连接不同数据类型。

3.substring

  1. 释义:提取字符串中两个指定的索引号之间的字符,包头不包尾。

  2. 参数:

    indexStart,一个 0 到字符串长度之间的整数。
    indexEnd,可选。一个 0 到字符串长度之间的整数。
    如果参数小于0或NaN,会被当做0。
    如果 indexStart 大于 indexEnd,则 substring 的执行效果就像两个参数调换了一样。
    例如,str.substring(1, 0) == str.substring(0, 1)。

  3. 原字符串:不变;

  4. 返回值:新字符串。

    var str="abcdef";
    str.substring(1,4); // "bcd"
    

4.substr

  1. 释义:从起始索引号提取字符串中指定数目的字符;

  2. 参数:

    start,开始提取字符的位置。如果为负值,则被看做 strLength + start
    length,可选。提取的字符数。省略则会提取到字符串末尾。

  3. 原字符串:不变;

  4. 返回值:提取的新字符串。

    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:

  1. 释义:提取一个字符串的一部分,并返回一新的字符串,包头不包尾。

  2. 参数:

    beginIndex,开始索引,如果为负值,则被看做 strLength + beginIndex
    endIndex,结束索引,如果省略,则会提取到字符串末尾。如果为负值,则被看做 strLength + endIndex。
    如果 beginIndex大于 endIndex,则 slice的执行效果不会像substring一样调换参数,而是返回空字符串。

  3. 原字符串:不变;

  4. 返回值:新字符串。

    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

  1. 释义:去除字符串两边的空格,内部空格不会去除;

  2. 参数:无;

  3. 原字符串:不变;

  4. 返回值:新字符串。

    var str = "   abc   ";
    str.trim(); // "abc";
    
    str.replace(/\s/g, "")//用正则去除所有空格
    

7.toLowerCase、toUpperCase

  1. 释义:全部转换成小、大写字母;
  2. 参数:无;
  3. 原字符串:不变;
  4. 返回值:新字符串。

8.indexOf、lastIndexOf

  1. 释义:返回某个指定的字符串值在字符串中首次(最后)出现的位置,如果没有,返回-1;

  2. 参数:

    searchValue,表示被查找的字符串值(必须)
    fromIndex ,开始查找的下标位置(可选),省略默认从0下标开始。

  3. 原字符串:不变;

  4. 返回值:返回指定值的第一次出现的索引; 如果没有找到 -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

  1. 释义:把字符串分割为字符串数组;

  2. 参数:

    separator(可选),使用该分隔符来分割字符串;
    limit(可选),指定返回的数组的最大长度。

  3. 原字符串:不变;

  4. 返回值:一个字符串数组。

    // 字符串没有分隔符
    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

  1. 释义:在字符串中查找匹配的子串, 并替换与正则表达式匹配的子串;

  2. 参数:

    searchvalue,必须。规定子字符串或要替换的模式的 RegExp 对象。
    newvalue,必需。一个字符串值。规定了替换文本或生成替换文本的函数。

  3. 原字符串:不变;

  4. 返回值:新的字符串,是用 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)的选项
    
  5. 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

    原文作者:演员小新
    原文地址: https://www.jianshu.com/p/2715bae9e34e
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞