前端H5面试题Js：JavaScript字符串的常用方法有哪些？

一、前言：

       可将字符串常用的操作方法归纳为增、删、改、查，需要知道字符串的特点是一旦创建了，就不可变。

二、增

          增的意思并不是说直接增添内容，而是创建字符串的一个副本，再进行操作，除了常用+以及${}进行字符串拼接之外，还可通过concat。

1. concat() 用于将一个或多个字符串拼接成一个新字符串

    <script>
        function demoConcat() {
            var str = "hello ";
            var ret = str.concat("world");
            console.log(ret); //hello world
            console.log(str); //hello
        }
        demoConcat()
    </script>

三、删

         删的意思并不是说删除原字符串的内容，而是创建字符串的一个副本，再进行操作。

1. slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串(取头不取尾)

    <script>
        function demoSlice() {
            var str = '希望大海风平浪静,却常常有狂风和恶浪。'

            console.log(str.slice(1, 8)); // 输出：望大海风平浪静
            console.log(str.slice(4, -2)); // 输出：风平浪静,却常常有狂风和恶
            console.log(str.slice(12)); // 输出：有狂风和恶浪。
            console.log(str.slice(30)); // 输出：""
        }
        demoSlice()
    </script>

2. substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集(含头不含尾)

    <script>
        function demoSubstring() {
            var str = "我愿意为你放弃曾经那些年少轻狂";

            console.log(str.substring(0, 3)); //我愿意

            console.log(str.substring(3, 7)); //为你放弃

            console.log(str.substring(3, 3)); //""

            console.log(str.substring(0, 15)); //我愿意为你放弃曾经那些年少轻狂
        }
        demoSubstring()
    </script>

四、改

          改的意思也不是改变原字符串，而是创建字符串的一个副本，再进行操作

1. replace() 替换出现的第一处  与  replaceAll() 全部替换

    <script>
        function demoReplace() {
            var str = "The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?";
            //将第一个dog替换为monkey
            // console.log(str.replace('dog', 'monkey'));

            //将第一个dog替换为 李沁
            var newStr = str.replace("dog", function (replacement) {
                return "李沁"
            })
            console.log(newStr); 
            //The quick brown fox jumps over the lazy 李沁. 
            //If the dog reacted, was it really lazy?

            // 将所有dog替换为 李沁
            var newStr2 = str.replaceAll("dog", function (replacement) {
                return "李沁"
            })
            console.log(newStr2); 
            //The quick brown fox jumps over the lazy 李沁. 
            //If the 李沁 reacted, was it really lazy?
        }
        demoReplace() 
    </script>

2. split()  方法使用指定的分隔符字符串将一个String对象分割成子字符串数组 

    <script>
        function demoSplit() {
            var str = 'The quick brown fox jumps over the lazy dog.';

            var words = str.split(' ');
            console.log(words);
            //['The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog.']

            //将目标字符串拆分为每个字符形成的数组
            var chars = str.split('');
            console.log(chars); //['T', 'h', 'e', ' ', 'q', ...'d', 'o', 'g', '.']

            //将str拆分为长度为1的数组 唯一的那个元素是str本身
            var strCopy = str.split();
            console.log(strCopy);
            // ["The quick brown fox jumps over the lazy dog."]

            //对拆分的结果取前5个元素
            chars = str.split('', 5);
            console.log(chars); //['T', 'h', 'e', ' ', 'q']
        }
        demoSplit()
    </script>

3. 修剪掉字符串头尾的空白     trim()

   修剪掉字符串尾部的空白     trimEnd()

   修剪掉字符串头部的空白     trimStart()

4. toUpperCase()、toLowerCase() 转换大小写

    <script>
        function demoToCase() {
            var sentence = 'The quick brown fox jumps over the lazy dog.';
            console.log(sentence.toUpperCase()); //THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
            console.log(sentence.toLowerCase()); //the quick brown fox jumps over the lazy dog.
        }
        demoToCase()
    </script>

五、查

除了通过索引的方式获取字符串的值，还可通过：

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

    <script>
        function demoCharAt() {
            var str = "我愿意为你放弃曾经那些年少轻狂";

            console.log(str.length); //15
            for (let i = 0; i < str.length; i++) {
                console.log(str.charAt(i));
            }
        }
        // demoCharAt()
    </script>

2. indexOf() 方法返回调用它的 String 对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。

    <script>
        function demoIndexOf() {
            var str = "我愿意为你放弃曾经你那些年少轻狂";

            var result = str.indexOf("你");
            console.log(result); //4

            var ret = str.indexOf("你", 5);
            console.log(ret); //9
        }
        demoIndexOf()
    </script>

3. includes() 方法用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。

    <script>
        function demoIncludes() {
            var str = "希望大海风平浪静,却常常有狂风和恶浪。"
            console.log(str.includes("浪静"));//true
            console.log(str.includes("上海"));//false

            console.log(str.indexOf("浪静") != -1);//true
            console.log(str.indexOf("上海") != -1);//false

        }
        demoIncludes()
    </script>

还有一些，一起查文档：String - JavaScript | MDN (mozilla.org)https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String