从零开始学前端 - 12. JS字符串String常用方法属性

作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。

---

   JS 字符串是引号中的零个或多个字符，我们可以简单的理解，只要是被引号包裹的内容，就是字符串。

1. String.length 获取字符串的长度

  语法：String.length
  作用：返回 String 的长度。
  实例：

	var str = "Hello world!";
	console.log(str.length);		// 12

注意，length 是 String 对象的属性，不是方法，不需要加括号。

2. String.charAt() 获取字符串指定位置的字符

  语法：String.charAt(index)
  作用：返回 String 中指定位置的字符。
  实例：

    var str = "Hello world!";
    console.log(str.charAt());              //  H
    console.log(str.charAt(0));             //  H
    console.log(str.charAt(-1));            //  ""

• index 为字符在字符串中的下标，默认值为 0 ；
• index 如果超出字符串的长度或者为负值，该方法会返回一个空字符串；

3. String.charCodeAt() 获取字符串指定位置的字符编码

  语法：String.charCodeAt(index)
  作用：返回字 String 中指定位置字符的 Unicode 编码。
  实例：

    var str = "Hello world!";
    console.log(str.charCodeAt());           //  72
    console.log(str.charCodeAt(0));          //  72
    console.log(str.charCodeAt(-1));         //  NaN

• index 为字符在字符串中的下标，默认值为 0 ；
• index 如果超出字符串的长度或者为负值，该方法会返回一个 NaN ；

4. String.concat() 拼接字符串

  语法：String.concat(str1,str2...)
  作用： 拼接字符串。返回一个由多个字符串按顺序拼接之后的新字符串。
  实例：

    var str = "Hello world!";
    var str2 = "I am learning ";
    var str3 = "JavaScript";
    console.log(str.concat(str2,str3));     //  Hello world!I am learning JavaScript

• 该方法会将把它的所有参数转换成字符串；
• 原字符串并不会被更改；

5. String.indexOf() 查找字符串

  语法：String.indexOf(value,index)
  作用： 查找字符串位置。返回 String 中某个指定的字符或字符串首次出现位置的下标。
  实例：

    var str = "Hello world!";
    console.log(str.indexOf("o"));           //  4
    console.log(str.indexOf("A"));           //  -1

• index 默认值为 0 ，规定从何处开始进行检索；
• 该方法的检索顺序是从前到后；
• 该方法返回的是 value 首次出现的下标，检索到后就会停止检索；
• 如果没有检索到，则会返回 -1；

6. String.lastIndexOf() 从后向前查找字符串

  语法：String.lastIndexOf(value,index)
  作用： 从后向前查找字符串位置。返回 String 中某个指定的字符或字符串最后出现位置的下标。
  实例：

    var str = "Hello world!";
    console.log(str.indexOf("o"));           //  7
    console.log(str.indexOf("A"));           //  -1

• 该方法与 indexOf() 相同，只是检索顺序是从后到前；

7. String.match() 查找字符串

  语法：String.match( value || regexp )
  作用： 查找字符串。在 String 中按照 value 或正则表达式进行匹配符合条件的字符串，组成一个数组返回。
  实例：

    var str = "Hello world!";
    console.log(str.match("o"));             //  ["o"]
    console.log(str.match("A"));             //  -1

    var str4 = "Hello world! Hello world!";
    console.log(str4.match(/Hello+/g));      //  ["Hello","Hello"]
    console.log(str4.match(/Hello/));        //  ["Hello"]

• 返回值是数组，数组中储存的并不是符合条件的下标，而是符合条件的字符串；
• regexp 代表了一个正则表达式，我们后续详细讲解；
• 是否提取出所有符合条件的字符，取决于正则表达式是否拥有 /g 标志；

8. String.replace() 替换字符串

  语法：String.replace( value || regexp , replaceValue)
  作用： 替换字符串。返回一个将 String 中所有符合条件的字符串替换成 replaceValue 的字符串。
  实例：

    var str = "Hello world!";
    console.log(str.replace("Hello","你好"));        //  你好 world!
    console.log(str.replace("你好","Hello"));        //  Hello world!

    var str4 = "Hello world! Hello world!";
    console.log(str4.replace(/Hello+/g,"你好"));    //  你好 world! 你好 world!
    console.log(str4.replace(/Hello/,"你好"));      //  你好 world! Hello world!

• 返回的是一个新的字符串，并不会修改原字符串；
• replaceValue 为必填项，否则会将符合条件的字符串替换为 undefined；
• 是否替换掉所有符合条件的字符，取决于正则表达式是否拥有 /g 标志；
• 若没有查找到符合条件的字符，则返回原字符串的内容；

9. String.search() 查找字符串

  语法：String.search( value || regexp )
  作用： 查找字符串。返回字符串中第一个符合条件的字符串的下标。
  实例：

    var str = "Hello world!";
    console.log(str.search("o"));        //  4
    console.log(str.search("A"));        //  -1

    var str4 = "Hello world! Hello world!";
    console.log(str4.search(/Hello+/g,"你好"));     //  0
    console.log(str4.search(/Hello/,"你好"));       // 0

• 返回的是符合条件的字符串的下标；
• 如果没有查找到符合条件的字符串，返回 -1；
• 永远返回第一个符合条件的下标，不受 /g 的影响；

10. String.slice() 截取字符串

  语法：String.slice( start , end )
  作用： 截取字符串。返回一个 String 从 start 到 end 之间的字符串。
  实例：

    var str = "Hello world!";
    console.log(str.slice(0,20));       //  "Hello world!"
    console.log(str.slice(6,-1));      //  "world"

• start 和 end 可以为负值， -1 表示最后一个字符，-2表示倒数第二个字符；
• start 如果超过了 String 的 长度，则会截取到字符串最后停止；
• 如果没有填写参数 end ， 默认为从 start 开始，截取到字符串最后；
• 不会修改原字符串；

11. String.split() 分割字符串

  语法：String.split( value || regexp , length )
  作用： 分割字符串。返回一个按条件进行分割的数组
  实例：

    var str = "Hello world!";
    console.log(str.split(""));         // ["H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
    console.log(str.split(" "));        // ["Hello", "world!"]
    console.log(str.split("o"));        // ["Hell", " w", "rld!"]
    console.log(str.split(/e/));        // ["H", "llo world!"]

• 如果传入空字符串""，会分割字符串的所有字符；
• 分割的数组中，不会包含 value || regexp；
• 数组的长度不会超过 length ；

12. String.substr() 截取字符串

  语法：String.substr(start,length)
  作用： 截取字符串。返回一个将 String 从 start 开始，长度为 length 的字符串；
  实例：

    var str = "Hello world!";
    console.log(str.substr(1));         // substr
    console.log(str.substr(1, 5));      // ello
    console.log(str.substr(1, -5));     // ""
    console.log(str.substr(-5));        // orld!

• length 可以为空，将会从 start 开始，截取到 String 末尾；
• start 可以为负数，将会从后向前开始计算位置；

13. String.substring() 截取字符串

  语法：String.substring(start,end)
  作用： 截取字符串。返回一个 String 从 start 到 end 之间的字符串。
  实例：

    var str = "Hello world!";
    console.log(str.substring(0,20));       // Hello world!
    console.log(str.substring(1,-5));       // Hello 

14. String.toLowerCase() 字符串转小写

  语法：String.toLowerCase()
  作用：将目标字符串的英文字母转换为小写。
  实例：

    var str = "Hello world!";
    console.log(str.toLowerCase();       // hello world!

15. String.toUpperCase() 字符串转大写

  语法：String.toUpperCase()
  作用：将目标字符串的英文字母转换为大写。
  实例：

    var str = "Hello world!";
    console.log(str.toUpperCase();       // HELLO WORLD!

---

种一棵树，最好的时间是十年前，其次是现在。人的一生，总的来时就是不断学习的一生。
蚕吐丝，蜂酿蜜。人不学，不如物。与其纠结学不学，学了有没有用，不如学了再说。
等你学会了之后，你才拥有资格说“啊，这个东西学了没用。”

---

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!
请大家关注我的微信公众号，我会定期更新前端的相关技术文章，欢迎大家前来讨论学习。

都看到这里了，三连一下呗~~~。点个收藏，少个 Bug 。