Javascript常用的字符串方法

Javascript有很多字符串的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,MDN上又太多。。其实常用的就那几个,很多都可以用那几个方法解出来。

很多方法中有兼容性的,在使用的时候,把兼容代码复制粘贴即可。

先贴上来数组和字符串的方法的比较,我在学习的时候也是会混。所以做了小总结。之后就是数组方法和一些实例。如果有侧边栏就好了,看得就比较清楚。

数组 字符串

slice | slice substring 截取需要开始和结束index的

splice | substr 截取需要开始index和截取长度的

concat | concat 都是连接,一个是连接数组,一个是连接字符串

indexOf | indexOf 搜索元素在不在里面,返回index值或者-1

join | split 这就是两个反义词啊,相互转化的利器

  • 截取方法中,字符串有三种方法slice / substring / substr ,数组方法有两个slice / splice
    其中字符串的slice 和 substring 是要开始和结束的索引,substr 是要开始索引和长度
    数组的slice是要开始和结束索引,但是splice是要开始索引和长度
  • 搜索元素方法中,数组和字符串都有indexOf方法,但是字符串多出来两种方法charAt和charCodeAt
    其中indexOf是返回索引,charAt是返回索引对应的值,charCodeAt是返回对应值的ASCII码值。
  • 数组的遍历有4中方法,map,every,foreach,some,filter
    其中foreach开始就停不下来,全部遍历。every遍历一个就判断一下,true就继续遍历下一个,false就跳出。map就是边遍历边运算。some返回的是布尔值,符合就是true,不符合就是false。filter返回的是符合元素组成的数组。
  • 增加数组元素,前面unshift,后面push
    移除数组元素,前面shift,后面pop
  • 数组和字符串都有concat方法,各自连接各自的,是数组就连接到数组,字符串就连接成字符串
  • 比较重要的两个就是数组和字符串之间的转化的两个方法
    join是数组转字符串,split是字符串转数组

字符串

查找字符串

charAt(返回字符)

str.charAt(index)

  • charAt()方法从一个字符串中返回指定的字符

  • index是0 ~ str.length-1 ,如果指定的index值超出了该范围,则返回一个空字符串

  • 输出字符串中不同位置的字符

    
    var anyString = "Brave new world";
    console.log("index 0   is '" + anyString.charAt(0)   + "'");
    console.log("index 1   is '" + anyString.charAt(1)   + "'");
    console.log("index 2   is '" + anyString.charAt(2)   + "'");
    console.log("index 3   is '" + anyString.charAt(3)   + "'");
    console.log("index 4   is '" + anyString.charAt(4)   + "'");
    console.log("index 999 is '" + anyString.charAt(999) + "'");
    
    //输出
    //  index 0 is 'B'
    //  index 1 is 'r'
    //  index 2 is 'a'
    //  index 3 is 'v'
    //  index 4 is 'e'
    //  index 999 is ''
    

charCodeAt(返回ASCII)

str.charCodeAt(index)

  • 返回索引对应的字符的ASCII表对应的值,0-65535之间的整数,超出范围返回NaN

  • index : 0 ~ length-1,如果不是一个数值,则默认为0

    "ABC".charCodeAt(0) // returns 65
    

indexOf(返回索引)

str.indexOf(searchValue[, fromIndex])

  • searchValue 一个字符串表示被查找的值

  • fromIndex 可选。

    • fromIndex < 0 则查找整个字符串(如同传进了 0)
    • 如果 fromIndex >= str.length,则该方法返回 -1
    • 如果被查找的字符串是一个空字符串,此时返回 str.length
  • 找到第一个元素的位置,没找到返回-1

    "Hello apple".indexOf("Hello");    // return  0
    "Hello apple".indexOf("Heloo");    // return -1
    "Hello apple".indexOf("apple", 0); // return  6
    "Hello apple".indexOf("apple", 6); // return  6
    "Hello apple".indexOf("", 10);     // return  10
    "Hello apple".indexOf("", 11);     // return  10
    
    //区分大小写
    "Hello apple".indexOf("hello") // returns -1
    
    //检测是否存在某字符串
    "Hello apple".indexOf("hello") !== -1; // true
    "Hello apple".indexOf("heloo") !== -1; // false
    
  • 使用indexOf统计一个字符串中某个字母出现的次数

    var str = 'To be, or not to be, that is the question.';
    //计数
    var count = 0;
    //判断str中有没有e元素
    var pos = str.indexOf('e');
    //如果有e元素,循环
    while (pos !== -1) {
      //计数加一
      count++;
      //从索引加1的位置开始找e
      pos = str.indexOf('e', pos + 1);
    }
    console.log(count); // displays 4
    

lastIndexOf(返回索引)

str.lastIndexOf(searchValue[, fromIndex])

  • searchValue 表示被查找的值

  • fromIndex 从后面找。

    • 默认值为 str.length。如果为负值,则被看作 0。如果 fromIndex > str.length,则fromIndex被看作str.length
  • 返回值没找到为-1,找到的索引是从前往后的

    "canal".lastIndexOf("a")   // returns 3
    "canal".lastIndexOf("a",2) // returns 1
    "canal".lastIndexOf("a",0) // returns -1
    "canal".lastIndexOf("x")   // returns -1
    

截取字符串

slice(索引)

str.slice(beginSlice[, endSlice])

  • beginSlice 开始的字符索引,如果是复数,就strLength + beginSlice

  • endSlice 结束的字符索引。可选,如果省略直接到末尾,如果是负数就是strLength + endSlice

  • 提取字符串,返回字符串,包括beginSlice,不包括endSlice

  • 使用slice()创建一个新的字符串

    var str1 = 'The morning is upon us.';
    //从第五个开始到不连倒数第二个结束
    var str2 = str1.slice(4, -2);  // returns 'morning is upon u'
    var str2 = str.slice(-3);     // returns 'us.'
    var str2 = str.slice(-3, -1); // returns 'us'
    var str2 = str.slice(0, -1);  // returns 'The morning is upon us'
    console.log(str2); // OUTPUT: morning is upon u
    

substring(索引)

str.substring(indexStart[, indexEnd])

  • indexStart 开始索引,0 ~ str.length

  • indexEnd 结束索引,可选。 0 ~ str.length,省略则到字符串结束

  • 两个参数小于0或者为NaN,被当作0,大于length,则当作length。如果开始大于结束,则结果和参数调换一样

    str.substring(1, 0) == str.substring(0, 1)

  • 截取开始到结束的字符串,返回新数组

    var anyString = "Mozilla";
    
    // 输出 "Moz"
    console.log(anyString.substring(0,3));
    console.log(anyString.substring(3,0));
    console.log(anyString.substring(3,-3));
    console.log(anyString.substring(3,NaN));
    console.log(anyString.substring(-2,3));
    console.log(anyString.substring(NaN,3));
    
    // 输出 "lla"
    console.log(anyString.substring(4,7));
    console.log(anyString.substring(7,4));
    
    // 输出 ""
    console.log(anyString.substring(4,4));
    
    // 输出 "Mozill"
    console.log(anyString.substring(0,6));
    
    // 输出 "Mozilla"
    console.log(anyString.substring(0,7));
    console.log(anyString.substring(0,10));
    
  • 替换一个字符串的子字符串

    //该例结尾调用的函数将 "Brave New World" 变成了 "Brave New Web"
    function replaceString(oldS, newS, fullS) {
    // Replaces oldS with newS in the string fullS
      for (var i = 0; i < fullS.length; i++) {
        if (fullS.substring(i, i + oldS.length) == oldS) {
         fullS = fullS.substring(0, i) + newS + fullS.substring(i + oldS.length, fullS.length);
        }
      }
      return fullS;
    }
    
    replaceString("World", "Web", "Brave New World");
    
    //需要注意的是,如果 oldS 是 newS 的子字符串将会导致死循环。例如,尝试把 "World" 替换成 "OtherWorld"。一个更好的方法如下:
    function replaceString(oldS, newS,fullS){
      return fullS.split(oldS).join(newS);
    }
    
    //更简单的要用replace
    

substr(长度)

str.substr(start[, length])

  • start 开始提取字符的位置。如果为负值,则被看strLength + start

  • length 可选,提取的字符数。不写到结尾

  • 返回新字符串

    var str = "abcdefghij";
    
    console.log("(1,2): "    + str.substr(1,2));   // (1,2): bc
    console.log("(-3,2): "   + str.substr(-3,2));  // (-3,2): hi
    console.log("(-3): "     + str.substr(-3));    // (-3): hij
    console.log("(1): "      + str.substr(1));     // (1): bcdefghij
    console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
    console.log("(20, 2): "  + str.substr(20,2));  // (20, 2):
    
  • 兼容,Microsoft's JScript 不支持负的 start 索引

    // only run when the substr function is broken
    if ('ab'.substr(-1) != 'b')
    {
      /**
       *  Get the substring of a string
       *  @param  {integer}  start   where to start the substring
       *  @param  {integer}  length  how many characters to return
       *  @return {string}
       */
      String.prototype.substr = function(substr) {
        return function(start, length) {
          // did we get a negative start, calculate how much it is
          // from the beginning of the string
          if (start < 0) start = this.length + start;
          
          // call the original function
          return substr.call(this, start, length);
        }
      }(String.prototype.substr);
    }
    

转换大小写

toLocaleUpperCase

str.toLocaleUpperCase()

  • 返回小写转大写的字符串

    console.log('alphabet'.toLocaleUpperCase()); // 'ALPHABET'
    

toLocaleLowerCase

str.toLocaleLowerCase()

  • 返回大写转小写的字符串

    console.log('ALPHABET'.toLocaleLowerCase()); 
    // 'alphabet'
    
    console.log('中文简体 zh-CN || zh-Hans'.toLocaleLowerCase());
    // '中文简体 zh-cn || zh-hans'
    

替换字符串

replace(生产环境不建议)

str.replace(regexp|substr,newSubStr|function)

  • regexp 正则对象或者其字面量,在进行全局替换时,要有g标志

  • substr 被替换的字符串

  • newSubStr 替换的新字符串(可以插入特殊字符串)

    | 变量名 | 代表的值 |
    | $$ | 插入一个"$" |
    | $& | 插入匹配的子串 |
    | $` | 插入当前匹配的子串左边的内容 |
    | $' | 插入当前匹配的子串右边的内容 |
    | $n | 假如第一个参数的正则对象,n是一个小于100的非负整数,那么插入第n个括号匹配的字符串 |

  • function 创建新字符串的函数,函数返回值是替换的内容,但是特殊替换的参数不能使用

  • 返回值是被替换过的新的字符串,不改变本身

    //下面的例子将会使 newString 'abc12345#$*%' 变成'abc - 12345 - #$*%'
    function replacer(match, p1, p2, p3, offset, string) {
      // p1 is nondigits, p2 digits, and p3 non-alphanumerics
      return [p1, p2, p3].join(' - ');
    }
    var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
    
  • 使用正则表达式

    //replace() 中使用了正则表达式及忽略大小写标示。
    var str = 'Twas the night before Xmas...';
    var newstr = str.replace(/xmas/i, 'Christmas');
    console.log(newstr);  // Twas the night before Christmas...
    
  • 使用global和ignore选项

    //下面的例子中,正则表达式包含有全局替换(g)和忽略大小写(i)的选项,这使得replace方法用'oranges'替换掉了所有出现的"apples".
    var re = /apples/gi;
    var str = "Apples are round, and apples are juicy.";
    var newstr = str.replace(re, "oranges");
    console.log(newstr);
    // oranges are round, and oranges are juicy.
    
  • 交换字符串中的两个单词

    //下面的例子演示了如何交换一个字符串中两个单词的位置,这个脚本使用$1 和 $2 代替替换文本
    var re = /(\w+)\s(\w+)/;
    var str = "John Smith";
    var newstr = str.replace(re, "$2, $1");
    // Smith, John
    console.log(newstr);
    
  • 使用行内函数来修改匹配到的字符

    //所有出现的大写字母转换为小写,并且在匹配位置前加一个连字符。重要的是,在返回一个替换了的字符串前需要在匹配元素前需要进行添加操作。
    
    //在返回前,替换函数允许匹配片段作为参数,并且将它和连字符进行连接作为新的片段。
    function styleFormat(name) {
      function lower(match) {
        return '-' + match.toLowerCase();
      }
      return name.replace(/[A-Z]/g, lower);
    }
    styleFormat('borderTop');  //返回 'border-top'
    //因为我们想在最终的替换中进一步转变匹配结果,所以我们必须使用一个函数。这迫使我们在使用toLowerCase()方法前进行评估。如果我们尝试不用一个函数进行匹配,那么使用toLowerCase() 方法将不会有效。
    
      var newString = propertyName.replace(/[A-Z]/g, '-' + '$&'.toLowerCase());  //报错
    
      //这是因为 $&.toLowerCase() 会先被解析成字符串字面量(这会导致相同的$&)而不是当作一个模式。
    
    

拼接字符串

concat

str.concat(string2, string3[, ..., stringN])

  • 将一个或多个字符串和原字符串合并,并形成一个新的字符串返回

  • 强烈建议使用赋值操作符(+,+=)代替concat方法

      var hello = "Hello, ";
      console.log(hello.concat("Kevin", " have a nice day."));
      /* Hello, Kevin have a nice day. */
    
  • 测试比较 (+ > concat + join) 推荐使用
concat.png

比较字符串

locateCompare

referenceStr.localeCompare(compareString[, locales[, options]])

  • referenceStr 引用字符串

  • compareStr 比较字符串

  • locales指的是比较的语言,options比较标准。这两个参数很多浏览器不支持,所以不用

  • 如果引用字符串在比较字符串前面,返回-1,当引用字符串在比较字符串后面时返回1。相同位置返回0(不同浏览器的原因,只关注正反即可)

    //一个字符一个字符比较
    'a'.localeCompare('c'); // -2 or -1 (or some other negative value)
    'check'.localeCompare('against'); // 2 or 1 (or some other positive value)
    'a'.localeCompare('a'); // 0
    
  • 检查浏览器对扩展参数的支持

    //locales 和 options 参数还没有被所有阅览器所支持。检查是否被支持, 使用 "i" 参数判断是否有异常 RangeError抛出
    function localeCompareSupportsLocales() {
      try {
        'foo'.localeCompare('bar', 'i');
      } catch (e) {
        return e.name === 'RangeError';
      }
      return false;
    }
    

去空格

trim

str.trim()

  • 删除字符串两端的空白字符,
  • 返回一个新字符串

    var orig = '   foo  ';
    console.log(orig.trim()); // 'foo'
    
  • 兼容问题,IE8及以下不可用

    if (!String.prototype.trim) {
      String.prototype.trim = function () {
        return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
      };
    }
    

切割字符串

split(数组)

str.split([separator[, limit]])

  • 将string对象分割成字符串数组,[]表示参数可选

  • 如果str是空字符串,split返回的是一个包含空字符串的数组,而不是一个空数组

  • separator 可以是一个字符串或正则表达式

    • 如果没有separator则返回整个字符串的数组形式
    • 如果separator是空字符串,则str将会把原字符串中每个字符的数组形式返回
    • 如果有字符串和表达式,则匹配字符串,separator会从字符串中被移除,按照字符串分隔成子串,分别放入数组
  • limit 一个整数,限定返回的分割片段的数量。split方法仍然分割每一个匹配的separator,但是返回的数组只会截取最多limit个元素。

    "Webkit Moz O ms Khtml".split( " " )   
    // ["Webkit", "Moz", "O", "ms", "Khtml"]
    
  • 限制返回值中分割元素数量

    var myString = "Hello World. How are you doing?";
    var splits = myString.split(" ", 3);
    console.log(splits);
    //["Hello", "World.", "How"]    length = 3
    
  • 捕获括号

    // separator 包含捕获括号(capturing parentheses),则其匹配结果将会包含在返回的数组中
    var myString = "Hello 1 word. Sentence number 2.";
    var splits = myString.split(/(\d)/);
    console.log(splits);
    //[Hello ,1, word. Sentence number ,2,.]
    

©copyright burning.

推荐阅读更多精彩内容

  • Javascript有很多数组的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,M...
    顽皮的雪狐七七阅读 2,968评论 0 5
  • 字符串对象的属性 字符串对象的方法(说明: 底色为土黄色的文字部分主要标明改部分的主要特征标签) String对象...
    南航阅读 595评论 0 0
  • 1、concat() 链接多个字符串,返回合并后的字符串 ex: var s1=“1”; var s2=“2”; ...
    janey_默阅读 72评论 0 0
  • 晚上用步行的方式去【外面】【动起来】,把涌上心头,挤在心门的“脑筋涌动”带到“动起来”的状态中试图让其自行理清脉络...
    庞晓低调想聪明做人阅读 35评论 0 0
  • 亲爱的二宝: 晚上好,又过了两天才来碎碎念,你一天天长大,妈妈一天比一天累了,不能走太快,不能拿太多东西,奶奶说可...
    颜若痕阅读 93评论 0 1