ES6笔记 -- 字符串拓展
字符串拓展
Unicode 相关
- JS 允许使用
/uxxxx
的Unicode方式显示字符, 但是只限于码点在/u0000~/uFFFF之间, 超过该范围的码点必须用双字节形式表示 - ES6 中, 将码点放入大括号内, 就可以解读
- JS 不能处理4个字节的字符, 字符串长度会被误判为2
- ES6 提供了
codePointAt
方法, 能够正确处理 4 个字节储存的字符 - 但是该方法在返回 4 个字节的字符串时, 依旧会返回两个参数, 第一个为正确解读的码点, 第二个为后两个字节的码点, 所以在多个包含 4 个字节的字符串时, 需要使用
for...of
循环 - 同样的, 将 4 个字节的码点转换成字符串, ES6 提供了
String.fromCodePoint()
方法
字符串操作
- ES6 为字符串添加了遍历器接口, 使其可以被
for...of
循环遍历, 相对传统的for
, 其优势在于可以识别大于/uFFFF
的码点
includes(), startsWith(), endsWith()
这三个方法可以确定字符串是否包含在另一个字符串中
includes()
方法表示是否找到了参数字符串.startsWith()
方法表示参数字符串是否为原字符串的首位endsWith()
方法表示参数字符串是否为原字符串的尾位- 三个方法的第一个参数为匹配字符串
- 前两个方法第二个参数为起始搜索位置(从 0 开始)
endsWith()
方法第二个参数为原字符串从左到右截取后剩下的长度
let s = 'Hello world!';s.startsWith('world', 6) // true s.endsWith('Hello', 5) // true s.includes('Hello', 6) // false
repeat()
repeat()
方法返回一个新字符串, 其接收一个number
类型参数, 表示重复次数- 该参数不能为小于等于 -1 的负数或者
Infinity
- 如果负数大于 -1, 则视为0
- 如果是字符串, 则会先转换为数字
- 其他的均视为0
'x'.repeat(3) // "xxx"
- 该参数不能为小于等于 -1 的负数或者
padStart(), padEnd()
这两个方法用于补全字符串
当字符串长度不够指定长度时, 会在头部或尾部补全
该方法接收两个参数
- 第一个是指定字符串长度,
- 第二个是用来补全的字符串, 该参数不填默认为空格
当字符串长度加上补全字符串超过指定长度时, 将截取超出位数的补全字符串
该方法一般用在数值补全指定位数
'1'.padStart(10, '0') // "0000000001" '12'.padStart(10, '0') // "0000000012" '123456'.padStart(10, '0') // "0000123456"
模板字符串相关
基本用法
语法
- 模板字符串定义在两个反引号( ` )之间,
- 它可以当做普通字符串使用, 也可以定义多行字符串, 或者在字符串中嵌入变量
- 变量写在
${}
之中, 除了能调用变量还能引用对象属性, 函数和进行简单的运算 - 如果需要使用反引号, 则需要用反斜杠 转义
- 模板字符串默认会保留空格与换行, 如果不需要可以用
trim()
方法消除
$('#result').append(`There are <b>${basket.count}</b> itemsin your basket, <em>${basket.onSale}</em>are on sale! `);
标签模板
模板字符串还可以当做模板标签
当模板字符串里为不包含变量的简单字符串, 数字等时, 函数会将模板字符串当做参数来处理
- 该用法不能代替原来函数的调用方式, 这里只是介绍使用方法, 原因在下面解释
alert`'abc'123` // 'abc'123
当模板字符串里包含变量时, 会有以下解析
将被变量( 即
${}
标识 )分开的普通字符串放进数组并当做第一个参数变量被从左到右依次解析并依次放入第二, 第三...第n个参数
tag`Hello ${ a + b } world ${ a * b }`; // 相当于 tag(['Hello ', ' world ', ''], 15, 50);
需要注意的是, 使用这种传参方式
- 第一个参数永远是数组
- 数组里有一个
raw
属性, 该属性保存的是转义后的原字符串, 所以该方式不能取代传统函数调用方式 - 数组里的元素个数永远等于参数个数
- 函数参数至少为两个(数组元素同), 如果只传一个变量, 则数组的两个元素为空
- 如果用这种方式传递字符串, 必须包含在单引号 ( ' )内, 否则会当做变量处理
- 通常这样做函数只声明一个参数, 传递的变量通过
arguments
方法来拿
下面一个复杂的案例可以涵盖以上内容
let total = 30; let msg = passthru`The total is ${total} (${total*1.05} with tax)`;function passthru(literals) {let result = '';let i = 0;// 这里 literals 与 arguments 长度一致while (i < literals.length) {// 这里 i++ 是使下面 arguments 直接从第二个参数拿起result += literals[i++];if (i < arguments.length) {result += arguments[i];}}return result; }msg // "The total is 30 (31.5 with tax)"
通常标签模板重要应用是用来过滤 HTML 字符串, 防止用户输入恶意内容
let message =SaferHTML`<p>${sender} has sent you a message.</p>`;function SaferHTML(templateData) {let s = templateData[0];for (let i = 1; i < arguments.length; i++) {let arg = String(arguments[i]);// Escape special characters in the substitution.s += arg.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");// Don't escape special characters in the template.s += templateData[i];}return s; }let sender = '<script>alert("abc")</script>'; // 恶意代码 let message = SaferHTML`<p>${sender} has sent you a message.</p>`;console.log(message) // <p><script>alert("abc")</script> has sent you a message.</p>
其他的需要过滤转换的都可以使用标签模板
转载于:https://www.cnblogs.com/xvvx/p/10278418.html
ES6笔记 -- 字符串拓展相关推荐
- 【ES6】字符串的拓展
[ES6]字符串的拓展 一.为什么ES6要进行字符拓展? 二.ASCLL码.Unicode编码.UTF-8编码的异同 三.ES6新增的字符串接口 1)codePointAt() 2)codePoint ...
- es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...
- ES6笔记(4)-- Symbol类型
系列文章 -- ES6笔记系列 Symbol是什么?中文意思是标志.记号,顾名思义,它可以用了做记号. 是的,它是一种标记的方法,被ES6引入作为一种新的数据类型,表示独一无二的值. 由此,JS的数据 ...
- es6+的javascript拓展内容
一.let,const 1.因为块级的作用域,这样打印01234,循环外打印i会报错 for (let i = 0; i < 5; i++) {setTimeout(console.log(i) ...
- 阮一峰老师的JavaScript标准参考教程:函数和ES6函数的拓展
函数 1. 概述 函数的声明 JavaScript 有三种声明函数的方法. (1)function 命令 function命令声明的代码区块,就是一个函数.function命令后面是函数名,函数名后面 ...
- ES6笔记(1) -- 环境配置支持
系列文章 -- ES6笔记系列 虽然ES6已经发布一年多了,但在各大浏览器之中的支持度还不是很理想,在这查看 ES6新特性支持度 Chrome的最新版本浏览器大部分已经支持,在Node.js环境上支持 ...
- es6拼接字符串的方式。
文章:es6拼接字符串的方式. 转载于:https://www.cnblogs.com/Tpf386/p/9519007.html
- 第六节:ES6为字符串String带来哪些好玩的特性?
工作日的推送尝试一下在晚上发,一个是考虑大家下班了放学了,心情轻松愉悦,适合阅读:另一个是上班时间情绪紧绷,没有心思也没有时间去完整地读完这种技术类的文章.(即便通俗易懂) 第六节,开讲啦...... ...
- ES6 --》字符串与数值新增方法
目录 字符串新增方法 模板字符串 字符串对象新增方法 数值新增方法 Math数值新增方法 主要讲解了ES6中字符串与数值新增的常见的主要方法, 对其做了如下总结: 字符串新增方法 ES6对字符串新增的 ...
最新文章
- Confluence 6 指派和撤销空间权限
- 计算机专业2016高考录取分数线,中国科学院大学计算机科学与技术专业2016年在江苏理科高考录取最低分数线...
- Python的C/C++扩展
- html金额自动换算成大写,[求助]word文档中金额数字自动转换为大写
- canvas 平滑运动_什么是电视上的运动平滑?人们为什么讨厌它?
- c++基础学习(11)--(模板、预处理器、信号处理)
- 专访车音网创始人沈康麒:语音识别有无数个痛点
- MySQL grant、revoke 用户权限注意事项
- 求助,我在Kell官网上下载的固件库,双击运行后显示错误:Zip integrity check failed.,该怎么解决?
- php 语言开发,PHP语言开发常用工具
- Vue 微信扫码支付
- mybatis官网文档mybatis_doc
- Linux系统地址栏,Linux下Chrome地址栏输入卡顿该怎么办?
- 高数-不定积分-分部积分法
- NOIP.COM账号注册以及密码找回
- 主张:男人害怕的30种女人(zt)
- Thickbox使用中的一些问题
- ios 动画 隐藏tabbar_ios 开发怎么隐藏tabbar
- javaScript中三大家族总结
- 2022-2028年版中国类金融行业发展走势与投资风险评估报告
热门文章
- 公众平台模板消息所在行业_第三方工具微信公众号模板消息群发如何操作?
- php mysql 正则_MySQL 正则表达式
- tf 如何进行svd_Tensorflow快餐教程(6) - 矩阵分解
- gitlab使用_使用 Docker 部署 Gitlab
- java swing 案例详解_《Java Swing图形界面开发与案例详解》PDF_IT教程网
- java定义js函数_JS中可以先使用函数,然后再定义.
- Nginx 实现网站 http、https 配置
- java接口并发衡量_java 后端设计高并发接口总结
- 汇编语言-007(ADD_SUB_NEG 、 PUSH和POP指令应用 、 AND,OR,XOR使用 、 条件跳转应用)
- python脚本编程实例_C程序调用Python脚本的例子