标签： 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. 51nod1448(yy)

    题目链接: http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1448 题意: 中文题诶~ 不过要仔细看题, 原来颜色是被覆盖 ...

  2. P4718 【模板】Pollard-Rho算法

    题面 传送门 题解 题解 太神仙了学不来orz //minamoto #include<bits/stdc++.h> #define R register #define ll long ...

  3. XtraBackup 备份与恢复实例讲解

    前一篇文章我们讲到了PXB的原理以及安装方法,接下来将详细介绍 XtraBackup 备份和恢复的具体过程. xtrabackup 选项 xtrabackup 工具有许多参数,具体可去官网查询(xtr ...

  4. sql开发技巧总结-2

    ---恢复内容开始--- 1.如何进行行列转换 需求: 列转换成行 select a.`user_name`,sum(b.kills) from user1 a join user_kills b o ...

  5. Linux更改文件或目录的所有者和所有组

    上节我们说了所有者和所有组的概念, 一个文件它的所有者是谁,属于哪个组的,不同的角色对其的操作权限是不一样的,详细信息请看上节Linux权限管理 这里我们主要说的是怎么去改变这个文件或目录的所有者和所 ...

  6. C语言数据结构-栈的实现-初始化、销毁、长度、取栈顶元素、查找、入栈、出栈、显示操作

    1.数据结构-栈的实现-C语言 #define MAXSIZE 100 //栈的存储结构 typedef struct { int* base; //栈底指针 int* top; //栈顶指针 int ...

  7. 线段树【洛谷P2894】 [USACO08FEB]酒店Hotel

    P2894 [USACO08FEB]酒店Hotel 参考样例,第一行输入n,m ,n代表有n个房间,编号为1---n,开始都为空房,m表示以下有m行操作,以下 每行先输入一个数 i ,表示一种操作: ...

  8. luogu1210 回文检测

    Manacher 正确读法:抹内A撤(马拉车) (跟着假硕学英语) 我们把原来的字符串,通过玄学处理,变成只留下字母,且每两个字母之间有一个奇怪的字符的那种Manacher专用字符串. 建立双射关系f ...

  9. 浅谈 关于ARC循环引用得问题

    这段时间在研究关于ARC得循环引用导致变量不能释放,在此先介绍一本书英文书: <Pro Multithreading and Memory Management for iOS and OS X ...

  10. 牛客国庆集训day5 G 贵族用户 （模拟）

    链接:https://www.nowcoder.com/acm/contest/205/G来源:牛客网 题目描述 终于活成了自己讨厌的样子. 充钱能让你变得更强. 在暖婊这个游戏里面,如果你充了x元钱 ...