标签： 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. Windows server iis部署Django详细操作

    教程基于Windows server2012+Python3.6+IIS之上部署django的,同样适用于server2012之上的版本服务器和windows7以上的windows操作系统. 文章来自 ...

  2. loj #6250. 「CodePlus 2017 11 月赛」找爸爸

    #6250. 「CodePlus 2017 11 月赛」找爸爸 题目描述 小 A 最近一直在找自己的爸爸,用什么办法呢,就是 DNA 比对. 小 A 有一套自己的 DNA 序列比较方法,其最终目标是最 ...

  3. oracle数据库性能

    性能视图V$开头 V$SYSTEM_EVENT 正在等待的资源的系统信息 V$SESSION_EVENT 会话累计发生的等待事件 V$SESSION_WAIT 会话正在等待或者曾经等待的详细时间信息 ...

  4. LVS+OSPF 架构（转）

    http://blog.51cto.com/pmghong/1399385 LVS 和 LVS+keepalived 这两种架构在平时听得多了,最近才接触到另外一个架构LVS+OSPF.这个架构实际上 ...

  5. 《图解HTTP》阅读笔记-第五章-web服务器

      第五章.与HTTP协助的web服务器单台虚拟主机实现多个域名可以用单台物理主机运行多台虚拟主机,这些虚拟主机的IP相同,而虚拟主机有可以寄存多个不同主机名和域名的web网站,所以要保证发送HTTP ...

  6. [USACO09OPEN]牛的数字游戏Cow Digit Game 博弈

    题目描述 Bessie is playing a number game against Farmer John, and she wants you to help her achieve vict ...

  7. thinkphp 3.0 核心函数U的一个致命bug

    最近在玩thinkphp,感觉内置函数 U 挺强大的! 传递多个参数时,出乱子了(window环境下,xampp) 例如 echo U('Blog/cate',array('cate_id'=> ...

  8. java背包的数组实现，链表实现

    数组实现 package base.structure; import java.lang.reflect.Array; import java.util.Iterator; /** * @progr ...

  9. Unity 动画系统 Animation和Animator等常用类

  10. django 访问静态资源

    urlpatterns = patterns('', url(r'^$', views.show, name='index'), url(r'^static/(?P<path>.*)', ...