内置对象之字符串String()对象

String 对象用于处理已有的字符块。

一个字符串用于存储一系列字符就像 "John Doe".

一个字符串可以使用单引号或双引号：

目录

字符串对象的创建

 基本的包装类型

字符串的不可变性

字符串对象的属性和方法

获取简单随机验证码

字符串简单处理

字符串的截取方法

滚动的文字案例

字符串对象的方法

字符串处理

统计出现最多的字符和次数

---

字符串对象的创建

 // 字符串对象的创建
        var str = 'halouskdakldjal';
        console.log(str);
        console.log(str.length);

        var str1 = new String("helloworld");
        console.log(str1);
        console.log(str1.length);


        // 我们通过字面量的方式创建字符串 在去使用字符串对象API的时候，浏览器内置会自动将str包装成一个字符串对象

 基本的包装类型

// 基本包装类型
        var str = 'andy';
        console.log(str.length);
        // 对象 才有 属性和方法   复杂数据类型才有 属性和方法 
        // 简单数据类型为什么会有length 属性呢？ 
        // 基本包装类型：  就是把简单数据类型 包装成为了 复杂数据类型 
        // (1) 把简单数据类型包装为复杂数据类型 
        var temp = new String('andy');
        // (2) 把临时变量的值 给 str
        str = temp;
        // (3) 销毁这个临时变量
        temp = null;

  // 简单数据类型 null  返回的是一个空的对象  object 
        var timer = null;
        console.log(typeof timer);
        // 如果有个变量我们以后打算存储为对象，暂时没想好放啥， 这个时候就给 null 
        // 1. 简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
     // 简单数据类型传参
        function fn(a) {
            a++;
            console.log(a);
        }
        var x = 10;
        fn(x);
        console.log(x);
        // 2. 复杂数据类型 首先在栈里面存放地址 十六进制表示  然后这个地址指向堆里面的数据
  // 复杂数据类型传参
        function Person(name) {
            this.name = name;
        }

        function f1(x) { // x = p
            console.log(x.name); // 2. 这个输出什么 ?  刘德华   
            x.name = "张学友";
            console.log(x.name); // 3. 这个输出什么 ?   张学友
        }
        var p = new Person("刘德华");
        console.log(p.name); // 1. 这个输出什么 ?   刘德华 
        f1(p);
        console.log(p.name); // 4. 这个输出什么 ?   张学友

字符串的不可变性

 // 字符串的不可变性
        var str = 'andy';
        console.log(str);
        str = 'red';
        console.log(str);
        // 因为我们字符串的不可变所以不要大量的拼接字符串
        // var str = '';
        // for (var i = 1; i <= 1000000000; i++) {
        //     str += i;
        // }
        // console.log(str);

字符串对象的属性和方法

   var str = '测试aab哈cdeaafg12345哈aa6xyz哈123';
        // length：字符串的长度或字符的个数
        console.log(str.length);

        // - 变量[索引]  IE7及以下不兼容 获取到的值是undefined
        console.log(str[0]);
        console.log(str[str.length - 1]);

        // - 变量.charAt(索引);
        console.log(str.charAt(0));
        console.log(str.charAt(str.length - 1));


        // 变量.charCodeAt(index); 获取对应某个字符的(ASCII)Unicode编码（在电脑系统中的编码）范围 0 -- 65535
        console.log(str.charCodeAt(0));
        console.log(str.charCodeAt(str.length - 1));


        // indexOf(str,[index]) /lastIndexOf(str,[index]); 判断当前字符串中是否包含某个字符串，返回首次/最后一次出现的索引，不包含返回-1
        console.log(str.indexOf('aa'));
        console.log(str.lastIndexOf('哈'));
        console.log(str.lastIndexOf('哈喽')); //-1

        //  '测试aab哈cdeaafg12345哈aa6xyz哈123';
        console.log(str.indexOf('aa',5));//9
        console.log(str.lastIndexOf('aa',5));//2,在第二个参数序号的地方倒着数最近的第一个参数元素的位置
        var str1 = "abcabcabc";
        console.log(str1.indexOf('a',4));//6
        console.log(str1.lastIndexOf('a',4));//3

获取简单随机验证码

// 获取元素
        var span = document.getElementsByTagName("span")[0];

        //  赋值一个随机4位验证码
        var char = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

        // 页面初始化

        // 点击切换
        span.onclick = function () {
            // 给span从新赋值
            this.innerHTML = getChar(5);
        }

        function getChar(n) {
            var str = '';
            for (var i = 0; i < n; i++) {
                str += char.charAt(getRandom(0, char.length - 1));
            }
            return str;
        }
        //封装函数
        function getRandom(min, max) {
       return Math.round(Math.random() * (max - min) + min);
       }

字符串简单处理

（对str进行处理，数字在前，字母在后，去掉特殊字符，并且数字和字母不能重复）

  var str =
            "Dklasdklsahdkl&&jdhkas***dkjaskldjakl!!!djkash1233djkahdk9789789789idui12ABCOOPP3456789dasu***dkasldjal%%djlasdjals97897";
        // 对str进行处理，数字在前，字母在后，去掉特殊字符，并且数字和字母不能重复
        // 变量.charCodeAt(index); 获取对应某个字符的(ASCII)Unicode编码（在电脑系统中的编码）范围 0 -- 65535
        // A-Z:65 - 90
        // a-z:97 - 122
        // 0-9:48 - 57
        var char = '';
        var num = '';
        for (var i = 0; i < str.length; i++) {
            // 判断字母
            //A-Z:65 - 90  和   a-z:97 - 122
            if (((str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) || (str.charCodeAt(i) >= 97 && str.charCodeAt(
                    i) <= 122)) && char.lastIndexOf(str[i]) == -1) {
                char += str[i];
            }

            // 判断数字
            if (str.charCodeAt(i) >= 48 && str.charCodeAt(i) <= 57 && num.indexOf(str[i]) == -1) {
                num += str[i];
            }
        }

        console.log(char, num);
        var newStr = num + char;
        console.log(newStr);

字符串的截取方法

 // 字符串所有的属性和方法都不会改变原来字符串
        // 截取不到返回空字符串
        var str = '测试aab哈cdeaafg12345哈aa6xyz哈123';

        /* 
        substring(startIndex,endIndex);
            参数
            startIndex:开始索引
            endIndex：结束索引  不包含结束索引
            规律
            从开始索引截取到结束索引，不包含结束索引
            不传递参数,startIndex的默认值是0，从索引为0截取到末尾
            只传递一个参数 startIndex,从开始索引截取到末尾
            不支持负数索引 startIndex为负数 默认值是0 从索引为0截取到末尾
            开始索引大于结束索引 首先交换位置 然后进行截取
        */
        console.log(str.substring(3, 6)); //"ab哈"
        console.log(str.substring()); //"测试aab哈cdeaafg12345哈aa6xyz哈123"
        console.log(str.substring(6)); //"cdeaafg12345哈aa6xyz哈123"
        console.log(str.substring(-5)); //测试aab哈cdeaafg12345哈aa6xyz哈123
        console.log(str.substring(5, 1)); //"试aab"
        console.log(str.substring(100, 200));
       // 字符串操作方法
        // 1. concat('字符串1','字符串2'....)
        var str = 'andy';
        console.log(str.concat('red'));

        /* 
            substr(startIndex,length);
                参数：
                startIndex:开始索引
                length:截取的长度
                规律：
                从开始索引截取多少个
                不传递参数,startIndex的默认值是0，从索引为0截取到末尾
                只传递一个参数 startIndex,从开始索引截取到末尾
                支持负数索引startIndex，length不能为负  -1从末尾开始依次类推，截取都是从前往后进行截取的
        */
        // '测试aab哈cdeaafg12345哈aa6xyz哈123'
        console.log(str.substr(2, 3)); //"aab"
        console.log(str.substr(100, 10)); //""
        console.log(str.substr()); //"测试aab哈cdeaafg12345哈aa6xyz哈123"
        console.log(str.substr(3)); //"ab哈cdeaafg12345哈aa6xyz哈123"
        console.log(str.substr(-6, 3)); //yz哈

        /* 
            slice(startIndex,endIndex);
            参数
             startIndex:开始索引
             endIndex：结束索引  不包含结束索引
             规律
             从开始索引截取到结束索引，不包含结束索引
             不传递参数,startIndex的默认值是0，从索引为0截取到末尾
             只传递一个参数 startIndex,从开始索引截取到末尾
             支持负数索引，startIndex，endIndex都支持, startIndex要小于endIndex
        */
        // '测试aab哈cdeaafg12345哈aa6xyz哈123'
        console.log(str.slice(2, 6)); //aab哈
        console.log(str.slice()); //'测试aab哈cdeaafg12345哈aa6xyz哈123'
        console.log(str.slice(3)); //'ab哈cdeaafg12345哈aa6xyz哈123'
        console.log(str.slice(-7, -3)); //'xyz哈'

滚动的文字案例

 <style>
        p {
            background-color: pink;
        }
    </style>
</head>

<body>
    <p>新华社北京8月11日电一个国际研究团队近日发布预印本论文说，研究人员在意大利一个麻疹等疾病监测项目于2019年9月采集的样本中检测出新冠病毒核糖核酸阳性，这意味着新冠病毒可能2019年夏末就已在意大利北部地区传播。</p>
    <p></p>
    <script>
        // 获取元素
        var oPs = document.getElementsByTagName("p");

        // 设置定时器
        var timer = setInterval(function () {
            // 第二个p标签每次多一个字
            // oPs[1].innerHTML  = oPs[1].innerHTML + oPs[0].innerHTML.slice(0,1);
            oPs[1].innerHTML += oPs[0].innerHTML.slice(0, 1);
            // "" +   "新" => "新"
            // "新" + "新" => "新华"
            // ...

            // 第一个p标签每次少一个字
            oPs[0].innerHTML = oPs[0].innerHTML.substr(1);
            // 第一个p标签长度为0清除定时器
            if (oPs[0].innerHTML.length == 0) {
                clearInterval(timer);
            }
        }, 30);
    </script>

字符串对象的方法

  // 字符串的方法
        //1.toUpperCase() / toLowerCase();  转为大写/小写字符串
        console.log("asD5" == "ASd5"); //ASCII值 false
        var str1 = "asD5";
        var str2 = "ASd5";

        console.log(str1.toUpperCase()); //转为大写字符串
        console.log(str1.toLowerCase()); //转为小写字符串
        console.log(str1.toLowerCase() == str2.toLowerCase());


        // 2.trim(); 去除首尾空格
        var str2 = "  aaa  bbb ccc  ";
        console.log("1" + str2 + "2");
        console.log("1" + str2.trim() + "2");


        // 3.replace(searchStr,replaceStr);  将查找到的字符串用新的字符串替换
        // searchStr:查找的字符串
        // replaceStr：替换字符串
        // 一次只能替换一处
        var testStr = "aabbccddaabbccddaa";
        var resStr = testStr.replace("aa", "哈喽");
        console.log(resStr); //哈喽bbccddaabbccddaa

        var res1Str = resStr.replace("aa", "哈喽");
        console.log(res1Str); //哈喽bbccdd哈喽bbccddaa

        var res2Str = res1Str.replace("aa", "哈喽");
        console.log(res2Str);


        // 4.split("分隔符"); 将字符串以某个字符串（分隔符）进行分割，返回值一个数组
        var str3 = "a=b=c=d=e=f";
        var str4 = "a+b+c+d+f-z";
        console.log(str3.split("="));
        console.log(str4.split("+"));
        var str2 = 'red, pink, blue';
        console.log(str2.split(','));
        var str3 = 'red&pink&blue';
        console.log(str3.split('&'));
 // 5. concat('字符串1','字符串2'....)
        var str = 'andy';
        console.log(str.concat('red'));

查找和替换案列

<input type="text" placeholder="查找"><input type="text" placeholder="替换"><button>按钮</button>
    <p>4月25日，上海车展女子“站车顶维权”事件发生一周后，大象新闻记者在酒店见到了车主张女士，在采访中
        她对自己的行为表示抱歉，并对特斯拉近日发布公告内的信息进行了质疑。
        谈上海维权起因：“等不到回复”
        从3月份开始，张女士就在她买车所在的特斯拉体验中心郑州中原福塔店反映车子的情况。张女士表示，那个时候每天去店里找工作人员解决问题，
        但是所有工作人员给她的回复都是，特斯拉体验中心中原福塔店是直营店，总部在上海，需要跟总部领导申请。
        “一等再等，始终没有收到任何答复“，张女士表示从车子出事故到26日早上为止，没有任何特斯拉的工作人员主动和她联系。
    </p>

    <script>
        // 获取元素
        var oIns = document.getElementsByTagName("input");
        var btn = document.getElementsByTagName("button")[0];
        var p = document.getElementsByTagName("p")[0];

        // 绑定事件
        btn.onclick = function(){
            var searchStr = oIns[0].value;
            var replaceStr = oIns[1].value;

            // 给p标签重新赋值
            // p.innerHTML = p.innerHTML.split(searchStr).join('<span>'+replaceStr+'</span>');

            // 循环进行替换
            while(p.innerHTML.indexOf(searchStr)  != -1){
                // 进行替换
                //  给p标签重新赋值  赋值的是原来内容替换完成的返回值
                p.innerHTML = p.innerHTML.replace(searchStr,'<span>'+replaceStr+'</span>');
            }
        }
    </script>

 

字符串处理

将这个字符串中 ?号后边的 ie=utf-8,f=8,...格式的存储到对象中（以键值的方式进行存储）

  var urlStr =
            'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js&fenlei=256&rsv_pq=8716edd500026596&rsv_t=295cpRUWzMcAKEm38bqptPBLTpAeYi0PIeXu3WKxqs9rF%2BVSXhJCuxL%2BaUs&rqlang=cn&rsv_enter=1&rsv_dl=ib&rsv_sug3=2&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=2004&rsv_sug4=2004';

        // 将这个字符串中 ?号后边的 ie=utf-8,f=8,...格式的存储到对象中（以键值的方式进行存储）

        // 获取?后边的字符串
        var curStr = urlStr.split("?")[1];
        console.log(curStr);
        // 将问号后边的字符串以&分割成一个数组
        var curArr = curStr.split("&");
        console.log(curArr);

        // 定义一个空对象
        var obj = {};

        // 循环遍历数组
        for (var i = 0; i < curArr.length; i++) {
            // 获取数组当前这个字符串
            var str = curArr[i];
            // 将当前这个字符串分割成一个小数组  数组中2项 第一项属性名 第二项属性值
            var strArr = str.split("=");
            console.log(str, strArr);

            // 存储到对象中
            // 将数组中的第一项取出来当做属性名  第二项当做属性值
            obj[strArr[0]] = strArr[1];
        }
        console.log(obj);

统计出现最多的字符和次数

   // 有一个对象 来判断是否有该属性 对象['属性名']
        var o = {
            age: 18
        }
        if (o['sex']) {
            console.log('里面有该属性');

        } else {
            console.log('没有该属性');

        }

        //  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
        // o.a = 1
        // o.b = 1
        // o.c = 1
        // o.o = 4
        // 核心算法：利用 charAt(） 遍历这个字符串
        // 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
        // 遍历对象，得到最大值和该字符
        var str = 'abcoefoxyozzopp';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var chars = str.charAt(i); // chars 是 字符串的每一个字符
            if (o[chars]) { // o[chars] 得到的是属性值
                o[chars]++;
            } else {
                o[chars] = 1;
            }
        }
        console.log(o);
        // 2. 遍历对象
        var max = 0;
        var ch = '';
        for (var k in o) {
            // k 得到是 属性名
            // o[k] 得到的是属性值
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log(max);
        console.log('最多的字符是' + ch);