ES6系列笔记-字符串方法和字符串模板

两个新方法

1:startsWith(判断开头)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        let  str="wqfge"
        //判断字符串是否是以w开头的,返回true则代表是的,返回false代表不是
        console.log(str.startsWith('a'))
    </script>
</html>

简单示例:判断网页链接开头的状态

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        /* let  str="wqfge"
        //判断字符串是否是以w开头的,返回true则代表是的,返回false代表不是
        console.log(str.startsWith('a')) */
        
        let  str='https://www.bilibili.com/video/av20327829?p=8'
        
        if(str.startsWith('http://')){
            alert('普通网址')
        }
        else  if(str.startsWith('https://')){
            alert('加密网址')
        }
        else  if(str.startsWith('git://')){
            alert('加密网址')
        }
    </script>
</html>

2:endWith(判断结尾)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        let  str="wqfge"
        //判断字符串是否是以e结尾的,返回true则代表是的,返回false代表不是
        console.log(str.endsWith('e'))
    </script>
</html>

打印结果


简单示例:判断文件的后缀

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        //endWith
        let str = '1.png';
        if (str.endsWith('.txt')) {
            alert("文本文件")
        } else if (str.endsWith('.jpg')) {
            alert("jpg")
        } else if (str.endsWith('.png')) {
            alert("png")
        }
    </script>
</html>

字符串模板

美元符号+花括号作用就是将定义好的变量a塞进字符串里面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        //反单引号,就是字符串模板
        let q = 22;
        let str = `a${q}s`; //美元符号+花括号作用就是将定义好的变量a塞进字符串里面
        console.log(str)
    </script>
</html>

打印结果如下:

小案例对比:
一般拼接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        let title = "标题";
        let content = "内容";
        //一般拼接方法,不能折行
        let str = '<div>\
                  <h1>' + title + '</h1>\
                  <p>' + content + '</p>\
                  </div>';
        console.log(str)
    </script>
</html>


字符串模板拼接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        let title = "标题";
        let content = "内容";
        //模板字符串
        //反单引号,就是字符串模板
        let str2 = `<div>
                  <h1>${title}</h1>
                  <p>${content}</p>
                  </div>`;
        console.log(str2)
    </script>
</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、字符串在C#中,字符串是一系列不可修改的Unicode字符,创建字符串后,就不能修改它。要创建字符串,最常用的...
    CarlDonitz阅读 5,108评论 0 2
  • 作者:米书林参考文章:《菜鸟教程》、《 ECMAScript 6 入门》(阮一峰) 字串的识别 ES6 之前判断字...
    林之小记阅读 2,972评论 0 1
  • 字符的 Unicode 表示法 codePointAt() String.fromCodePoint() 字符串的...
    卞卞村长L阅读 4,153评论 0 0
  • 字符串和字符 [TOC] 字符串是例如 "hello, world" , "albatross" 这样的有序的 C...
    伍哥___阅读 4,775评论 0 0
  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 4,819评论 0 1

友情链接更多精彩内容