字符串的扩展

  在看这一节的时候前半部分写的都是关于unicode的内容,我个人感觉这部分在实际的开发中用的很少,所以不打算在做记录,等届时用到再有针对性的看,所以就将在ES6里面关于字符串操作的一些新的方法举一些例子看下;

  一、操作方法:

    1.传统上关于字符串的查找只有indexof()这一个方法;在ES6里面新增:

      

includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
在这三个方法里面允许传入第二个参数:
let s = 'Hello world!';
s.startsWith('world', 6) // true 代表从index为6一直到字符串结束的部分;
s.endsWith('Hello', 5) // true 代表从开始到index为5的部分;
s.includes('Hello', 6) // false 代表从index为6一直到字符串结束的部分;

    2.repeat方法返回一个新字符串,表示将原字符串重复n次。

 

'hello'.repeat(2);结果:'hellohello';
'hello'.repeat(0);结果:' ';传入0;意味重复0次;
'hello'.repeat(2.9);结果:'hellohello';会被向下取整;
'hello'.repeat(Infinity)或者'hello'.repeat(负数);结果报错;
'hello'.repeat(a) -1<a<0 // "此时a会被当做0处理";
'hello'.repeat(NaN);结果:' ';当做0处理;
'hello'.repeat('3');传入字符串的时候会先将字符串转化为数字;

    3.padStart()头部补全,padEnd()尾部补全;

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba' 以上两个方法均接收两个参数,第一个参数将原始字符串用第二个字符串补全长度至第一个参数;
如果第二个参数省略,那将会用空格补全;

    4.模板字符串

原先jquery写法:
$(div).append('你的好友<b>'+username+'</b>向你发送了<span>'+money+'</span>元的红包');
模板字符串写法:
$(div).append(`你的好友<b>${username}</b>向你发送了<span>${money}</span>元红包`);
在模板字符串内可以解析变量;
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
如果在一个字符串中需要使用` 这个字符的话,需要用\进行转译;console.log(\`我\`);结果: `我`;
另外模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。 此外模板字符串还可以调用函数;
function fn() {
return "嘟嘟嘟";
} `foo ${fn()} bar` // foo Hello 嘟嘟嘟 bar
如果{a};a没有被定义将会报错;如果a是对象将会先将a执行toString();
模板字符串还可以嵌套使用:
const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`;

ES6学习历程(字符串的扩展)的更多相关文章

  1. JavaScript学习笔记--ES6学习(四) 字符串的扩展

    ES6对字符串进行了一些扩展,主要表现在对Unicode 大于\uFFFF的字符的处理上. 1. ES6中字符的Unicode表示方法 在ES5中,字符串的Unicode表示方法: \uxxxx . ...

  2. ES6学习5 字符串的扩展

    1.ES6 为字符串添加了遍历器接口,使得字符串可以被for...of循环遍历. for (let codePoint of 'foo') { console.log(codePoint) } // ...

  3. ES6学习之字符串的扩展

    字符的Unicode表示法 \uxxxx可以表示一个双字节的字符(xxxx表示字符编码,范围在0000---FFFF),超出此范围用两个双字节表示. console.log("\u0061& ...

  4. es6学习笔记--字符串&数值&数组&函数&对象的扩展

    这几天抽空学习了es6语法,关于字符串,数值,数组,函数以及对象的扩展,看到es6标准入门这本书,里面讲的扩展特别多,我认为有几部分在项目上用不到,就挑有用的当笔记学习了. 字符串的扩展 str.in ...

  5. ES6学习笔记(字符串和数值)

    (一)字符串的扩展 1.字符串的遍历 for (let codePoint of 'foo') { console.log(codePoint) } // "f" // " ...

  6. JavaScript学习笔记--ES6学习(五) 数值的扩展

    ES6 对于数值类型 (Number) 进行了一下扩展: 1.对于二进制和八进制提供了新的写法 ES6对于二进制和八进制的数值提供了新的写法,分别用0b (或者0B) 和0o (或者0o) 表示.例如 ...

  7. ES6(四)字符串的扩展

    1.字符的表示方式 最早在  \u0000-\uFFFF 之间的字符已经足够使用吗,每个字符占两个字节,超出范围,必须使用双字节形式表达, 即每个字符占四个字节.超出范围的字符,会被解读成  \uXX ...

  8. ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

    在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...

  9. ES6标准入门 字符串的扩展

    1:模板字符串与模板引擎 https://blog.csdn.net/crper/article/details/52940625 es6模板字符串中标签模板作为参数时产生空元素的问题 https:/ ...

随机推荐

  1. Xcode9自带版本控制系统(Git)的使用

    情形一:新项目工程 前提是首先你得有个Github账号. 1.创建新工程,选中使用git,创建本地仓库. 2.在偏好设置添加git账号. 3.创建Github远程仓库,xcode会自动帮你在Githu ...

  2. 树莓派玩耍笔记1 -- 开箱 &amp; 安装系统以及简单配置

    零.前言 树莓派是什么? 吃的么? 呵呵,假设您连这个还不知道,真是out 了. 麻烦出门左拐.百度去(或者,看看官网去?),算了.还是粘贴一些大家都知道的树莓派百科吧: 树莓派由注冊于英国的慈善组织 ...

  3. 将分布式-队列的实现交给redis

    import requestsimport reimport timefrom redis import Redisimport threading REDIS_HOST, REDIS_PORT, P ...

  4. bzoj2427 [HAOI2010]软件安装——缩点+树形DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2427 今天的考试题...好不容易一次写对了树形DP,却没发现有环的情况... 发现自己 ta ...

  5. akka设计模式系列

    由于本人爱好Scala,顺便也就爱好Akka,但目前网上对Akka的介绍大多都是概念上或技术方向上的介绍,基本没有Akka设计模式或者Actor模型设计模式的资料.这对于Akka的普及非常不利,因为即 ...

  6. ajax 以json 的形式来传递返回参数的实例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestWcf.aspx.c ...

  7. Jsoup爬虫获取公司纳税识别号

    天眼查 /** * 根据公司名称获取统一社会信用代码 * * @author xiaofei.xian 日期:2019年3月20日 上午11:12:41 */ public class GetTaxN ...

  8. 【转】DOS与linux的断行字符

    转自:http://www.2cto.com/os/201109/104833.html 今天配置linux的dns服务器,在配置的时候,在linux下修改配置文件感觉很麻烦,于是想到把配置文件拿到w ...

  9. [转]Android监听ListView里Button事件

    本文转自:http://blog.csdn.net/lovediji/article/details/6753349 public View getView(int position, View co ...

  10. react native 报错日常 if (_total > 0) { ~~~~~~ ^ ~ 1 error generated.

    node_modules/react-native/React/Base/RCTJavaScriptLoader.mm::: error: ordered comparison between poi ...