标签： 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. ObjectARXWizards & AutoCAD .NET Wizards 下载地址

    Autodesk Developer Network ObjectARX Wizards The ObjectARX Wizards for AutoCAD 2016 for  Visual Stud ...

  2. vue坑

    项目地址:https://pan.baidu.com/s/1c1Dflp2 使用前提:安装nodejs环境,webpack的配置官网的例子跟着跑一遍,会vue开发 研究webpack+vue研究了一个 ...

  3. P2891 [USACO07OPEN]吃饭Dining 最大流

    \(\color{#0066ff}{ 题目描述 }\) 有F种食物和D种饮料,每种食物或饮料只能供一头牛享用,且每头牛只享用一种食物和一种饮料.现在有n头牛,每头牛都有自己喜欢的食物种类列表和饮料种类 ...

  4. iOS沙盒文件目录

    iphone沙箱模型的有四个文件夹,分别是什么,永久数据存储一般放在什么位置,得到模拟器的路径的简单方式是什么.documents,tmp,app,Library.(NSHomeDirectory() ...

  5. List<T>中 GetRange (int index, int count)的使用

    GetRange:在源 List<T> 中创建元素范围的浅表复制. ; ) { List<T> uplist = new List<T>(); u++; <= ...

  6. bcb6重启应用程序

    在工程的cpp文件中WinMain还是得最后添加如下的代码(其中g_blsRunAgain为bool类型的全局变量,在需求重启的时候先将g_blsRunAgain置为true,再将程序关闭,之后就会重 ...

  7. sublime 显示 python 错误信息

    默认的编译器可以直接按Ctrl+B编译运行Python,并在控制台输出结果.美中不足的是无法输出中文,需要自己手动配置一番. 在Sublime Text 3 中依次点击菜单Tools->buil ...

  8. 【学习笔记】Python 3.6模拟输入并爬取百度前10页密切相关链接

    [学习笔记]Python 3.6模拟输入并爬取百度前10页密切相关链接 问题描述 通过模拟网页,实现百度搜索关键词,然后获得网页中链接的文本,与准备的文本进行比较,如果有相似之处则代表相关链接. me ...

  9. Educational Codeforces Round 7 A

    Description Consider the infinite sequence of integers: 1, 1, 2, 1, 2, 3, 1, 2, 3, 4, 1, 2, 3, 4, 5. ...

  10. Jenkins自动化CI CD流水线之2--用户权限管理

    一. 背景 针对开发.运维.测试针对不同角色进行不同权限划分, 基于插件: Role-based Authorization Strategy来实现. 一. 安装 安装该插件: 系统管理->管理 ...