字符串的扩展
Posted mj-my
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了字符串的扩展相关的知识，希望对你有一定的参考价值。
<!--字符串的扩展-->
<script type="text/javascript">
/*1.字符串的unicode表示法*/
function unicode(){
//JavaScript 允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点
console.log("\u0061");//a
//但是，这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。
console.log("\uD842\uDFB7");//"??"
console.log("\u20BB7");//?7;
/*超过了\u0000~\uFFFF之间的字符。JavaScript 会理解成\u20BB+7。由于\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟着一个7。*/
//ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。
console.log("\u{20BB7}");//"??",
console.log("\u{41}\u{42}\u{43}");//ABC;
let hello = 123;
console.log("\u{6F}");//"o".
console.log(hell\u{6F});//123
console.log(hell\u{6F}==hello);//true
console.log(‘\u{1F680}‘===‘\uD83D\uDE80‘)//true
//上面代码中，最后一个例子表明，大括号表示法与四字节的 UTF-16 编码是等价的。
//有了这种表示法之后，JavaScript 共有 6 种方法可以表示一个字符。
console.log(‘\z‘ === ‘z‘,‘\172‘ === ‘z‘,‘\x7A‘ === ‘z‘,‘\u007A‘ === ‘z‘,‘\u{7A}‘ === ‘z‘)//true
};
unicode();
/*2.codePointAt()*/
/*JavaScript 内部，字符以 UTF-16 的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符（Unicode 码点大于0xFFFF的字符），JavaScript 会认为它们是两个字符。*/
function codePointAt(){
var s = "??";
let xm = "吉";
console.log(s.length);//2字节
console.log(s.charAt(0))//""。
console.log(s.charAt(1))//""。
console.log(s.charCodeAt(0))//55362
console.log(s.charCodeAt(1))//57271
console.log(xm.length);//1字节。
console.log(xm.charCodeAt(0));//21513
//ES6 提供了codePointAt方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点。
let st = ‘??a‘;
console.log(st.codePointAt(0)) // 134071
console.log(st.codePointAt(1)) // 57271
console.log(st.codePointAt(2)) // 97
//codePointAt方法返回的是码点的十进制值，如果想要十六进制的值，可以使用toString方法转换一下。
// console.log(st.codePointAt(0).toString(16)) // "20bb7"
// console.log(st.codePointAt(2).toString(16)) // "61"
//你可能注意到了，codePointAt方法的参数，仍然是不正确的。比如，上面代码中，字符a在字符串s的正确位置序号应该是 1，但是必须向codePointAt方法传入 2。解决这个问题的一个办法是使用for...of循环，因为它会正确识别 32 位的 UTF-16 字符。
for (let ch of st) {
console.log(ch.codePointAt(0).toString(16));
};
//codePointAt方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。
function is32Bit(c) {
return c.codePointAt(0) > 0xFFFF;
};
is32Bit("??") // true
is32Bit("a") // false
};
codePointAt();
/*3.String.fromCodePoint()*/
/*es5提供string。fromCharCode方法，用于从码点返回对应字节。但是这个方法不能识别32位UTF-16字符（unicode编号大于0xffff）*/
function fromCodePoint(){
console.log(String.fromCharCode(0x20BB7))//?
//es5,不能识别大于0xffff的码点，所以最高位2被舍弃，最后返回码点u+0BB7对应的字符，而不是码点u+20bb7对应的字符。
console.log(String.fromCodePoint(0x20BB7))//??
//ES6 提供了String.fromCodePoint方法，可以识别大于0xFFFF的字符，弥补了String.fromCharCode方法的不足。在作用上，正好与codePointAt方法相反。
console.log(String.fromCodePoint(0x78, 0x1f680, 0x79) === ‘x\uD83D\uDE80y‘)//true
//上面代码中，如果String.fromCodePoint方法有多个参数，则它们会被合并成一个字符串返回。
//注意，fromCodePoint方法定义在String对象上，而codePointAt方法定义在字符串的实例对象上。
};
fromCodePoint();
/*4.字符串的遍历器接口*/
/*es6为字符串添加了遍历接口，使得字符串可以被for..of循环遍历*/
function strFor(){
for(let codePoint of "foot"){
console.log(codePoint);//f,o,o,t
};
/*除了遍历字符串，这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。*/
var text = String.fromCodePoint(0x20BB7);
//传统for循环，识别不了大于0xFFFF的码点。
for (let i=0; i<text.length;i++){
console.log(text[i]);
};
//es6循环
for(let txt of text){
console.log(txt);//??
}
};
strFor();
/*5.at()*/
/*ES5 对字符串对象提供charAt方法，返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符*/
function att(){
var txt = "abc";
var ji="??";
console.log(txt.charAt(0));//a
console.log(ji.charAt(0));//""
/*es6需要通过垫片库实现*/
//console.log(ji.at(0))
};
att();
/*6.normalize() 糯摸来s*/
/*7.includes(),startsWith(),endsWith()*/
/*includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。*/
function search(){
let s = "hello world!";
console.log(s.includes("o"));//true
console.log(s.startsWith("h"));//true
console.log(s.endsWith("!"));//true
//以上三个方法都支持第二个参数，表示开始搜索的位置
console.log(s.includes("world!",6));
console.log(s.startsWith("l",2));
console.log(s.endsWith("hello",5 ))
};
search();
/*8.repeat()*/
/*repeat方法返回一个新字符串，表示将原字符串重复n次。*/
function repeat(){
var txt = "广东爱情故事";
console.log(txt.repeat(3))//3遍。
console.log(txt.repeat(0))//空，
/*小数点取整，不进行四舍五入*/
console.log(txt.repeat(2.9))
//如果repeat的参数是负数或者Infinity，会报错。
//console.log(txt.repeat(Infinity));
//console.log(txt.repeat(-1));
/*但是，如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0。*/
console.log(txt.repeat(-0.9));//空
//参数NaN等于0；
console.log(txt.repeat(NaN));
/*如果repeat的参数是字符串，则会先转换成数字。*/
console.log(txt.repeat("3"));
};
repeat();
/*9.padStart,padEnd()*/
/*ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。*/
function pad(){
var txt = "x";
console.log(txt.padStart(5,"ab"));//ababx
console.log(txt.padEnd(5,"ab"));//xabab
/*上面代码中，padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。*/
/*如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。*/
var text = "xxx";
console.log(text.padStart(2,"ab"));
console.log(text.padEnd(2,"ab"));
/*如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。*/
console.log(text.padStart(10,"0123456789"));
//如果省略第二个参数，默认使用空格补全长度。
console.log(text.padStart(5));
//padStart的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。
console.log(text.padStart(10, ‘0‘));// "0000000xxx"
console.log(text.padStart(10, ‘0‘));// "0000000xxx"
console.log(text.padStart(10, ‘0‘));// "0000000xxx"
//另一个用途是提示字符串格式
var day = "09-12";
console.log(text.padStart(10,"YYYY-MM-DD"));
console.log(day.padStart(10,"YYYY-MM-DD"));
};
pad();
/*11.模板字符串*/
function templateStr(){
var num = 12;
var text = `<b>你们好${num}</b>`;
document.write(text);
//多行字符串。
$(".bgg").html(`
<ul>
<li>123</li>
<li>456</li>
</ul>
`.trim());
//大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。
let x = 1;
let y = 2;
document.write(`${x} + ${y} = ${x + y}`);
// "1 + 2 = 3"
document.write(`${x} + ${y * 2} = ${x + y * 2}`)
// "1 + 4 = 5"
let obj = {x: 1, y: 2};
document.write(`${obj.x + obj.y}`);
// "3"
//模板字符串之中还能调用函数。
function fn() {
return "Hello World";
};
document.write(`foo ${fn()} bar`);
/*如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。*/
//如果模板字符串中的变量没有声明，将报错。
// 变量place没有声明
// let msg = `Hello, ${place}`;
// 报错
/*由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出*/
document.write(`Hello ${‘World‘}`);
//模板字符串甚至还能嵌套。
const tmpl = addrs =>document.write(`
<table>
${addrs.map(addr => `
<tr>
<td>${addr.first}</td>
</tr>
<tr>
<td>${addr.last}</td>
</tr>
`).join(‘‘)}
</table>
`);
//上面代码中，模板字符串的变量之中，又嵌入了另一个模板字符串，使用方法如下。
const data = [
{ first: ‘<Jane>‘, last: ‘Bond‘ },
{ first: ‘Lars‘, last: ‘<Croft>‘ },
];
// <table>
//
// <tr><td><Jane></td></tr>
// <tr><td>Bond</td></tr>
//
// <tr><td>Lars</td></tr>
// <tr><td><Croft></td></tr>
//
// </table>
//如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。
let str = ‘return ‘ + ‘`Hello ${name}!`‘;
let func = new Function(‘name‘, str);
func(‘Jack‘); // "Hello Jack!"
// 写法二
let strt = ‘(name) => `Hello ${name}!`‘;
let funct = eval.call(null, strt);
funct(‘Jack‘) // "Hello Jack!
};
templateStr();
以上是关于字符串的扩展的主要内容，如果未能解决你的问题，请参考以下文章