标签： 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. Java泛型<>内各种参数的异同

    先说下本篇随笔主要涉及到的东西(参考Java编程思想一书): 1.说明 List<Fruit> 与 List<Apple> 之间为什么是非继承关系. 2.由 1 引出的问题说明 ...

  2. 2017第八届蓝桥杯决赛（C++ B组）4.发现环

    描述 小明的实验室有N台电脑,编号1~N.原本这N台电脑之间有N-1条数据链接相连,恰好构成一个树形网络.在树形网络上,任意两台电脑之间有唯一的路径相连. 不过在最近一次维护网络时,管理员误操作使得某 ...

  3. C++基础学习2：命名空间

    C++语言引入命名空间(Namespace)这一概念主要是为了避免命名冲突,其关键字为 namespace. 科技发展到如今,一个系统通常都不会仅由一个人来开发完成,不同的人开发同一个系统,不可避免地 ...

  4. C++基础学习1: C++布尔类型

    布尔类型(bool)是C++新增的一种基本数据类型.在标准的C语言中并未定义bool类型,如果需要使用bool类型, 程序员可以通过宏定义来自定义一个bool类型,定义语句如下: #define bo ...

  5. CF796D Police Stations 思维

    Inzane finally found Zane with a lot of money to spare, so they together decided to establish a coun ...

  6. C语言使用指针表示数组的注意事项

    1)数组名是指针常量 如对指针变量可以进行++运算,但是对数组名却不允许,另外,对数组名的赋值运算也是错误的 2)注意指针变量的当前值 指针变量的值在程序运行过程中可能经常改变,要对此注意 3)数组越 ...

  7. Unity 动画系统 Animation和Animator 常用小功能

  8. Linux下Redis安装使用，主从模式，哨兵模式与PHP扩展(PHP7适用)

    一,软件准备 #redis wget http://download.redis.io/releases/redis-3.0.7.tar.gz #phpredis 非php7使用 下载后文件名为:ph ...

  9. fiddler抓包出现错误 creation of the root certificate was not successful

    fiddler安装完要配置才可以抓取HTTP 1.首先 找到Tools——>Options,在弹出的菜单中 选择https项 勾选捕捉https,这样配置完OK之后 一般会弹窗提示安装证书,点击 ...

  10. 5月 28日css前端知识

    a:link {color : #FF0000}    #未访问连接时设置颜色 a:visited {color:  #FF0000}   #访问过得连接设置颜色 a:hover {color: #F ...