标签： javascript es6

字符串新增特性

  1. 新增二个方法 - startsWith/endsWith
  2. 字符串模板 - 反单引号的应用

startsWith

判断字符串以是否以某某开头，返回一个布尔值

示例代码如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>startsWith</title>

  <script type="text/javascript">

    //判断一个网址的类型

    function judgeUrl(str){

      if(str.startsWith('http://')){

        console.log(str+':这是个普通网址');

      }else if(str.startsWith('https://')){

        console.log(str+':这是个加密网址');

      }else if(str.startsWith('git://')){

        console.log(str+':这是个git地址');

      }else if(str.startsWith('svn://')){

        console.log(str+':这是个SVN地址');

      }else{

        console.log('其它!');

      }

    }

  </script>

</head>

<body>

  <button onclick="judgeUrl('http://www.baidu.com');">http://www.baidu.com</button>

  <button onclick="judgeUrl('https://www.baidu.com');">https://www.baidu.com</button>

  <button onclick="judgeUrl('git://www.baidu.com');">git://www.baidu.com</button>

  <button onclick="judgeUrl('svn://www.baidu.com');">svn://www.baidu.com</button>

  <button onclick="judgeUrl('htdfdfdfdf');">http://www.baidu.com</button>

</body>

</html>

测试地址

endsWith

判断字符串以是否以某某结束，返回一个布尔值

示例代码如下：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>endsWith</title>

  <script type="text/javascript">

    //判断一个网址的类型

    function judgeUrl(str){

      if(str.endsWith('.jpg')){

        console.log(str+':这是jpeg格式图片');

      }else if(str.endsWith('.png')){

        console.log(str+':这是png格式图片');

      }else if(str.endsWith('.gif')){

        console.log(str+':这是gif格式图片');

      }else if(str.endsWith('.bmp')){

        console.log(str+':这是bmp格式图片');

      }else{

        console.log('其它!');

      }

    }

  </script>

</head>

<body>

  <button onclick="judgeUrl('aaa.jpg');">aaa.jpg</button>

  <button onclick="judgeUrl('aaa.png');">aaa.png</button>

  <button onclick="judgeUrl('aaa.gif');">aaa.gif</button>

  <button onclick="judgeUrl('aaa.bmp');">aaa.bmp</button>

  <button onclick="judgeUrl('aaa.doc');">aaa.doc</button>

</body>

</html>

测试地址

字符串模板

  • 可以直接把变量插入到字符串里面
  • 折行不必做特殊处理

示例代码如下:

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>字符串模板</title>

</head>

<body>

  <h3>字符串方式</h3>

  <div id="test1"></div>

  <hr />

  <h3>\方式</h3>

  <div id="test2"></div>

  <hr />

  <h3>ES6字符串模板方式</h3>

  <div id="test3"></div>

  <script>

    var title = "这是标题";

    var content = "这里是内容，应该放的内容!!";

    //第一种字符串拼接方法

    var htmlStr0 = "<div>"+

    "<h4>"+title+"</h4>"+

    "<p>"+content+"</p>"+

    "</div>";

    //第二种字符串拼接方法

    var htmlStr1 = "<div>\

    <h4>"+title+"</h4>\

    <p>"+content+"</p>\

    </div>";

    //es6字符串模板方法

    var htmlStr2 = `<div>

    <h4>${title}</h4>

    <p>${content}</p>

    </div>`;

    document.getElementById('test1').innerHTML = htmlStr0;

    document.getElementById('test2').innerHTML = htmlStr1;

    document.getElementById('test3').innerHTML = htmlStr2;

  </script>

  </script>

  </script>

</body>

</html>

测试地址

粗看ES6之字符串的更多相关文章

  1. 粗看ES6之面向对象写法

    标签: es6 在es6以前,js没有类的概念,虽然有构造函数原型的方式用来做面向对向开发,但是对于书法并不是十分友好,而且对于继承实现也不是十分友好. es6引入class constructor ...

  2. 粗看ES6之JSON

    标签: es6 ES6新增JSON特性不是特别多,只是针对JSON某些情况下的写法上有一些优化: 当key值和value值对应变量名相同时 json对像中的方法书写 示例代码如下: <!DOCT ...

  3. 粗看ES6之数组

    标签: javascript es6 数组新增方法 map(可以理解为是映射,以一定规则修改数组每一项并返回全新数组) reduce(可以理解为是汇总,一堆出来一个) filter(可以理解为过滤,筛 ...

  4. 粗看ES6之解构赋值

    标签: javascript es6 什么是解构赋值? 示例如下: <!DOCTYPE html> <html> <head> <meta charset=& ...

  5. 粗看ES6之函数

    标签: es6 javascript 箭头函数 ES6为了书写方便引入了函数的全新简写方式-箭头函数 <!DOCTYPE html> <html> <head> & ...

  6. 粗看ES6之变量

    标签: javascript var定义变量面临的问题 可以重复定义 无法限制变量不可修改 无块级作用域 ES6变量定义升级 新增let定义变量 新增const定义常量 let特性 有块级作用域 不可 ...

  7. javascript的replace+正则 实现ES6的字符串模版

    采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中.开始时代码量较少,暂时还可以接受.但当页面结构复杂起来后,其弱点开始变得无法忍受起来: 书写不连贯.每写一个变量就要断一下,插入一个 + 和 ...

  8. ES6让字符串String增加了哪些好玩的特性呢?

    确实因为现在天气变热了,所以一天天的这么写我也很累.所以如果阅读的时候有什么错误还请大家指出来,不好意思.学习永无止境. OK,今天继续讲解ES6系列知识 学过上一节的解构赋值就知道,ES6确实给我们 ...

  9. es6之字符串添加的东西

    在es6里边对字符串添加了一些东西! 字符串模板(非常友善) 相信大家之前都遇到过万恶的字符串拼接,真是噩梦,不过之后有了字符串模板之后,再也不用担心字符串拼接会乱了... 之前的字符串拼接 let ...

随机推荐

  1. codevs1169, 51nod1084(多线程dp)

    先说下codevs1169吧, 题目链接: http://codevs.cn/problem/1169/ 题意: 中文题诶~ 思路: 多线程 dp 用 dp[i][j][k][l] 存储一个人在 (i ...

  2. window下 mysql密码忘记

    1.打开MySQL配置文件 my.ini中,添加上skip-grant-tables,可以添加到文件的末尾或者是这添加到[mysqld]的下面. 2.重启mysql 3.这时登录MySQL不再需要验证 ...

  3. git 打tag

    查看已有tag git tag 创建新的tag git tag <version or tagname> -m <tag description> 例如创建一个版本1.0.0的 ...

  4. Jupyter Notebook命令

    Jupyter Notebook命令 1.启动 tensorboard --logdir=2017_05_03_00_12

  5. [USACO08NOV]安慰奶牛Cheering up the Cow BZOJ 1232 Kruskal

    Farmer John变得非常懒, 他不想再继续维护供奶牛之间供通行的道路. 道路被用来连接N (5 <= N <= 10,000)个牧场, 牧场被连续地编号为1..N. 每一个牧场都是一 ...

  6. 命令行编译运行Java程序

  7. 毕业设计 python opencv实现车牌识别 预处理

    主要代码参考https://blog.csdn.net/wzh191920/article/details/79589506 GitHub:https://github.com/yinghualuow ...

  8. shell脚本：Ctrl+C终止的是哪个进程

    aa.sh中的内容如下图: 运行sh aa.sh, 显示aa.txt后面几行, 此时开启了两个进程:一个sh运行,一个tail -f运行 按Ctrl+C 会终止此sh进程, 父进程死了,里面的tail ...

  9. docker（3）docker下的centos7下安装jdk

    1.将jdk-8u65-linux-x64.tar.gz文件传到docker的宿主机上 rz 2.将宿主机上的jdk-8u65-linux-x64.tar.gz复制到centos7的容器下 #在宿主机 ...

  10. 转 JDBC连接数据库（二）——连接池

    https://www.cnblogs.com/xiaotiaosi/p/6398371.html 数据库保持长连接,不过一直都是idle,除非有用户激活连接,这样后果是无法删除用户,但是不影响数据库 ...