Javascript常用的字符串方法

作者: 顽皮的雪狐七七 | 来源:发表于2017-05-21 22:21 被阅读426次

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,.]