首页 > 代码库 > ES6之字符串学习
ES6之字符串学习
以下是常用的方法不是全部方法
1.codePointAt()方法
有一些字段需要4个字节储存,这样charCodeAt方法的返回就是不正确的,用codePointAt()方法就可以返回
十进制的值。如果要十六进制的值,可以使用toString方法转换
var s = ‘??a‘; s.codePointAt(0).toString(16) // "20bb7" s.codePointAt(2).toString(16) // "61"
2.String.fromCodePoint()
有一些字段需要4个字节储存,这样fromCharCode( 可接受一个指定的 Unicode 值,然后返回一个字符串) 方法
不能正确返回。fromCodePoint弥补它的不足
String.fromCodePoint(0x20BB7) // "??" String.fromCodePoint(0x78, 0x1f680, 0x79) === ‘x\uD83D\uDE80y‘ // true
fromCodePoint与codePointAt方法相反。
3.字符串的遍历器接口
字符串可以被for...of
循环遍历。
var text = String.fromCodePoint(0x20BB7); for (let i = 0; i < text.length; i++) { console.log(text[i]); } // " " // " " for (let i of text) { console.log(i); } // "??"
4.at()(对原来的charAt()方法的弥补)
charAt()方法是返回在指定位置的字符。该方法不能识别码点大于0xFFFF
的字符。
‘abc‘.charAt(0) // "a" ‘??‘.charAt(0) // "\uD842"
5.includes(),startsWith(),endsWith()
- includes():返回布尔值,表示是否找到了参数字符串。
- startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
6.repeat()
repeat
方法返回一个新字符串,表示将原字符串重复n
次。
‘x‘.repeat(3) // "xxx" ‘hello‘.repeat(2) // "hellohello" ‘na‘.repeat(0) // ""
参数如果是小数,会被取整。
‘na‘.repeat(2.9) // "nana"
如果repeat
的参数是负数或者Infinity
,会报错。
‘na‘.repeat(Infinity) // RangeError ‘na‘.repeat(-1) // RangeError
但是,如果参数是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。
0到-1之间的小数,取整以后等于-0
,repeat
视同为0。
‘na‘.repeat(-0.9) // ""
参数NaN
等同于0。
‘na‘.repeat(NaN) // ""
如果repeat
的参数是字符串,则会先转换成数字。
‘na‘.repeat(‘na‘) // "" ‘na‘.repeat(‘3‘) // "nanana"
7.padStart(),padEnd()
某个字符串不够指定长度,会在头部或尾部补全。padStart()
用于头部补全,
padEnd()
用于尾部补全
‘x‘.padStart(5, ‘ab‘) // ‘ababx‘ ‘x‘.padStart(4, ‘ab‘) // ‘abax‘ ‘x‘.padEnd(5, ‘ab‘) // ‘xabab‘ ‘x‘.padEnd(4, ‘ab‘) // ‘xaba‘
如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。
如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,
则会截去超出位数的补全字符串。
‘abc‘.padStart(10, ‘0123456789‘) // ‘0123456abc‘
如果省略第二个参数,默认使用空格补全长度。
padStart
的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。
‘1‘.padStart(10, ‘0‘) // "0000000001" ‘12‘.padStart(10, ‘0‘) // "0000000012" ‘123456‘.padStart(10, ‘0‘) // "0000123456"
另一个用途是提示字符串格式。
‘12‘.padStart(10, ‘YYYY-MM-DD‘) // "YYYY-MM-12" ‘09-12‘.padStart(10, ‘YYYY-MM-DD‘) // "YYYY-09-12"
8.模板字符串
传统的JavaScript语言,输出模板通常是这样写的。
$(‘#result‘).append( ‘There are <b>‘ + basket.count + ‘</b> ‘ + ‘items in your basket, ‘ + ‘<em>‘ + basket.onSale + ‘</em> are on sale!‘ );
上面这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题。
$(‘#result‘).append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale! `);
模板字符串(template string)是增强版的字符串,用反引号(`)标识。
它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串
中嵌入变量。
// 普通字符串 `In JavaScript ‘\n‘ is a line-feed.` // 多行字符串 `In JavaScript this is not legal.` console.log(`string text line 1 string text line 2`); // 字符串中嵌入变量 var name = "Bob", time = "today"; `Hello ${name}, how are you ${time}?`
大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性
var x = 1; var y = 2; `${x} + ${y} = ${x + y}` // "1 + 2 = 3" `${x} + ${y * 2} = ${x + y * 2}` // "1 + 4 = 5" var obj = {x: 1, y: 2}; `${obj.x + obj.y}` // 3
模板字符串之中还能调用函数。
function fn() { return "Hello World"; } `foo ${fn()} bar` // foo Hello World bar
如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个
对象,将默认调用对象的toString
方法。
如果模板字符串中的变量没有声明,将报错。
如果需要引用模板字符串本身,在需要时执行,可以像下面这样写。
// 写法一 let str = ‘return ‘ + ‘`Hello ${name}!`‘; let func = new Function(‘name‘, str); func(‘Jack‘) // "Hello Jack!" // 写法二 let str = ‘(name) => `Hello ${name}!`‘; let func = eval.call(null, str); func(‘Jack‘) // "Hello Jack!"
9.实例:模板编译
下面,我们来看一个通过模板字符串,生成正式模板的实例。
var template = ` <ul> <% for(var i=0; i < data.supplies.length; i++) { %> <li><%= data.supplies[i] %></li> <% } %> </ul> `;
10.标签模板
模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,
该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。
alert`123` // 等同于 alert(123)
标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
但是,如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。
“标签模板”的一个重要应用,就是过滤HTML字符串,防止用户输入恶意内容。
var message = SaferHTML`<p>${sender} has sent you a message.</p>`; function SaferHTML(templateData) { var s = templateData[0]; for (var i = 1; i < arguments.length; i++) { var 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; }
模板字符串本身并不能取代Mustache之类的模板库,因为没有条件判断和循环处理功能,
但是通过标签函数,你可以自己添加这些功能。
// 下面的hashTemplate函数 // 是一个自定义的模板处理函数 var libraryHtml = hashTemplate` <ul> #for book in ${myBooks} <li><i>#{book.title}</i> by #{book.author}</li> #end </ul> `;
10.String.raw()
String.raw
方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义
(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。
String.raw`Hi\n${2+3}!`; // "Hi\\n5!" String.raw`Hi\u000A!`; // ‘Hi\\u000A!‘
如果原字符串的斜杠已经转义,那么String.raw
不会做任何处理。
引自:http://es6.ruanyifeng.com/#docs/stri ng#String-fromCodePoint
ES6之字符串学习