JavaScript学习总结基础篇字符串的使用

最新推荐文章于 2024-10-13 10:39:31 发布

Ace_bb

最新推荐文章于 2024-10-13 10:39:31 发布

阅读量246

点赞数

分类专栏： HTML、CSS、JS 文章标签： javascript 字符串 js

本文链接：https://blog.csdn.net/Ace_bb/article/details/104390863

版权

HTML、CSS、JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

字符串的使用

如何查看数据类型类型判断

<script>
        let hd="3";
        let arr=[1,2,3];
        let obj={};
        console.log(typeof hd);
        console.log(typeof arr);
        console.log(typeof obj);
    </script>

log需要在控制台中查看。chrome浏览器按F12快捷键。

<script>
        let hd="3";
        let arr=[1,2,3];
        let obj={};
        console.log( hd instanceof String);
        console.log( arr instanceof Array);
        console.log( obj instanceof Object);
    </script>

instanceof用于判断声明的变量是否为某一类型的对象。

字符串

**转义符空格符\t 换行符\n **

<script>
        let hd="hsujsof\"sdsfsf";
        console.log(hd);
        let str="hhhh\t\t\tsss\nddddd";
        console.log(str);
    </script>

连接多个字符串

<script>
        let year="2020 nian";
        let month="2 month";
        let day="19 day";
        console.log(year + month + day);
        console.log(`${year} ${month} ${day}`);
        console.log(year + "的" + month + "的" + day);
        console.log(`${year}的${month}的${day}`);
    </script>

dollar符旁边的小撇，在键盘上的1左边，Tab上边。

字符串一些常用函数

<body>
    <script>
        let name="abcdefghiklmn";
        console.log(name.length);
        console.log(name.toUpperCase());
        console.log(name.toLowerCase());
        let size = "       abcdf    ";
        console.log(size.trim().length);//去除字符串

    </script>
</body>

实例
设计一个表单输入密码，密码不能输入空格，小于5位时提示。大于5位提示消失。

<body>
    <input type="password" name="password" />
    <span></span>
    <script>
        let ps = document.querySelector("[name='password']");
        ps.addEventListener("keyup",function(){
            this.value = this.value.trim();
            let span = document.getElementsByTagName("span");
            let error="";
            if(this.value.length<5){
                error = "密码不能小于5位";
            }
            span[0].innerHTML = error;
        });
    </script>
</body>

字符串截取

<body>
    <script>
        let hd = "summervocation";
        console.log(hd.slice(1));
        console.log(hd.slice(1,6));
        console.log(hd.slice(-6));
        console.log(hd.substring(1));
        console.log(hd.substring(1,5));
        console.log(hd.substring(-3));
        console.log(hd.substr(1));
        console.log(hd.substr(1,7));
        console.log(hd.substr(-3));
    </script>
</body>

截取函数如上代码，substring函数会把负参数当0；

字符串检索

<body>
    <script>
        let hd = "summervocation";
        console.log(hd.indexOf("s")); //检查是否存在字符"s" 存在则返回位置，不存在返回-1
        console.log(hd.indexOf("o",5));// 从第五位开始检索
        console.log(hd.indexOf("1")); //1 不存在，返回-1
        console.log(hd.includes("o",3)); //检索 o 是否存在 返回boo类型
        console.log(hd.lastIndexOf("m",10)); // 从第10位倒着检索
        console.log(hd.startsWith("s")); //判断是否以s开头
        console.log(hd.toLowerCase().startsWith("s"));//不区分大小写判断
        console.log(hd.endsWith("n")); //判断是否以n结尾
    </script>
</body>

实例：电话号码模糊处理

<body>
    <script>
        function phone(mobile, len=3){
            return String(mobile).slice(0,len*-1)+"*".repeat(len);
        }
        console.log(phone(16452735689,4));
    </script>
</body>

字符串类型转换

<body>
    <script>
        const str ="99";
        console.log(typeof str);
        console.log(str*1+778); //隐式转换
        console.log(Number(str));  //调用构造函数显示转换
        console.log(typeof Number(str));

        const num = 99;
        console.log(typeof num); 
        const str1 = num + ""; //隐式转换位字符串
        console.log(typeof str1);
        console.log(typeof String(num));  //先手转换

        const str2 = "99hhhhhh";
        console.log(parseInt(str2)); //转换位整数类型，后面的字符自动省略，但必须以数字开头

        const arr="abcdefgh";
        console.log(arr.slice(""));
        console.log(arr.slice("").length); //将字符串转换为数组

        const arr2 = ["aaa","bbb","ccc"];
        console.log(arr2.join(" ")); //将数组连为字符串，中间以空格相连
        console.log(arr2.join("|")); //将数组连为字符串，中间以 |  相连

    </script>
</body>