【关于Javascript】--- 字符串篇(含ES6)

常用操作清单

获取对应位置的字符：

charAt(index); //根据索引号index返回对应的字符，没有则返回''

substr(n,m); //从起始索引号n提取m个数目的字符，没有则返回'';没指定m 则从n到结束

substring(n,m); //返回 n到m[不含m]区间 的字符串，如果不指定结束位置，则从开始位置到结尾

slice(n,m); //返回从起始索引号n，到结束索引号（不含）m 的字符串，如果不指定结束位置，则从开始位置到结尾

var str = "abcdefghijklmn";
//下标直接获取
str[3];//"d"

//charAt
str.charAt(3) //d;

//substr
str.substr(3) //"defghijklmn"  不指定结束默认到结尾
str.substr(3,0) || str.substr(14) // "" 提取0个或超过字符长度
str.substr(3,3) //"def"

//substring   n不一定要少于等于m
str.substring(3) //"defghijklmn" 不指定结束默认到结尾
str.substring(3,3) //"" 从3到3区间不含3 所以返回""
str.substring(3,12)//"defghijkl"  
str.substring(12,3) //"defghijkl"等同于 str.substring(3,12) 这个就是和slice不一样的地方

//slice   n不一定要少于等于m
str.slice(3) //"defghijklmn" 不指定结束默认到结尾
str.slice(3,3) //"" 从3到3区间不含3 所以返回""
str.slice(3,12)//"defghijkl"  
str.slice(12,3) //""  
str.slice(-3)   //"lmn" 倒数第三

判断是否含有字符串：

indexOf(data,start); //返回字符串位置 没有则返回-1；

lastIndexOf(data,start); //返回字符最后出现的位置 没有则返回-1；

str.search(reg); //返回字符串位置，没有则返回-1。 只查找一次，即使设置了g。重复调用也是从起始位置开始

/\d/.test(str); //返回布尔值；检验字符串符不符合正则;

str.match(reg); //返回null或数组；查找 有子表达式 返回所有结果；无子表达式 全局匹配返回全部；有子表达式 返回结果和分组；

str.exec(reg); //返回null或数组；查找 有子表达式 返回逐次结果和分组；无子表达式 逐次逐个返回；和match相似又有细微不同；

var str = "abcdbeabf";
str.indexOf('b') //1
str.indexOf('b',2) //4  第二个参数是开始位置的索引 含自身
str.search('b') //1
/b/.test(str)  //true

//match
str.match(/b/) //["b", index: 1] str.match(/b/)[0]>>"b" str.match(/b/).index>>1
str.match(/b/g) //["b", "b", "b"]
str.match(/a(b)/g) //["ab", "ab"]

//exec
/b/.exec(str) //["b", index: 1]  reg.exec(str)[0]>>"b" /b/.exec(str).index>>1
/b/g.exec(str) 同上 没子表达式时 就算g也是逐次
var reg = new RegExp("a(b)","g") ; 
reg.exec(str) //["ab", "b", index: 0] 
reg.exec(str) //["ab", "b", index: 6]

连接分隔替换：

concat(); //连接字符串。

split('-'); //指定字符分割字符串，返回数组 和join反过来

str.replace(/\d/g,'数字'); //替换：替换规则，替换内容'; 返回执行后的内容

其他操作：

charCodeAt(); //返回在指定的位置的字符的 Unicode 编码;

fromCharCode(); //从字符编码创建一个字符串。

toLowerCase(); //把字符串转换为小写。

toUpperCase(); // 把字符串转换为大写。

//concat
var str1 ="23",str2="hi";
str1.concat(str2) //23hi

var str = "1,2,3,4";
str.split(',')//[1,2,3,4];

var str = "132sd23sd2";
str.replace(/\d/g,'数字');//"数字数字数字sd数字数字sd数字"

"sd".charCodeAt(0) //115
"sd".charCodeAt()  //115
"sd".charCodeAt(1) //100

String.fromCharCode(115) //s
String.fromCharCode(115,100) //sd

ES6字符串的扩展

字符串的遍历器接口: for...of //继承for有遍历的功能 外增加了能识别大于0xFFFF的码点

for  (let codePoint of  'foo')  {       
    console.log(codePoint)   //'f'//'o'//'o'
}
------------------
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);// "????"
}   

模板字符串 //（template string）用反引号（\`）标识。它可以当作普通字符串使用

1.在模板字符串中需要使用反引号，则前面要用反斜杠转义。

`In JavaScript '\n' is a line-feed.`

var greeting \=  \`\\\`Yo\\\` World!\`; //如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

2.使用模板字符串表示多行字符串，所有的空格和缩进都会保留。

// 多行字符串   
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

3.\` hello `.trim() 就可删除前后空格。

//trim() <ul>标签开头的空格会去掉
console.log(`
   <ul>
  <li>first</li>
</ul>  
`.trim()); //<ul>标签开头的空格会去掉

4.模板字符串中嵌入变量，变量名写在${}之中。

// 字符串中嵌入变量 变量放在${}中
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

5.大括号内部可以写表达式，可以进行运算，以及引用对象属性。

//大括号内部
var x = 1, 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

6.模板字符串之中还能调用函数。

//模板字符串之中还能调用函数。
function fn() {
  return "Hello World";
}
`foo ${fn()} bar`// foo Hello World bar

7.大括号默认 toString()

//大括号默认 toString()
var msg = `Hello, ${place}`;// 变量place没有声明报错
`Hello ${'World'}`//大括号里面已经转了字符串 直接输出》 "Hello World"

8.能多层嵌套

//嵌套
const data = [
    { first: '<Jane>', last: 'Bond' },
    { first: 'Lars', last: '<Croft>' },
];

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;
console.log(tmpl(data));

//如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。
// 写法一
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!"

标签模板 //函数调用的一种特殊形式。"标签"指函数，模板字符串是参数。

可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）

1.标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

alert`hello`
// 等同于
alert(['hello'])

//alert 》 '标签' 在这里即是指 `函数`
//`hello` 》 模板字符串的hello就是 `参数`

2.如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数
例子一：

var a = 5,b = 10;

---函数调用---
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

---函数声明---
//tag函数：
function tag(stringArr, value1, value2){
    console.log('输出',stringArr,'--',value1,'--',value2)
}
//tag函数等同于
function tag(stringArr, ...values){}

分析：
标识名tag，它是个函数。模板字符串的内容就是 参数。

tag函数所有参数:模板字符串中那些没有变量替换的部分 然后是按顺序的变量参数。

• 参数一：模板字符串中所有非变量部分而组成的数组。即['Hello ', ' world ', '']
• 参数二: 15
• 参数三：50

也就是说，tag函数实际上以下面的形式调用

tag(['Hello ', ' world ', ''], 15, 50)

例子二： 示范如何重新拼装输出

let total = 30;
let msg = passthru`The total is ${total} (${total*1.05} with tax)`;
function passthru(literals, ...values) {
  console.log(literals,arguments);// 打印看看参数
  let output = "";
  let index;
  for (index = 0; index < values.length; index++) {
    output += literals[index] + values[index];
  }

  output += literals[index]
  return output;
}
msg输出： The total is 30 (31.5 with tax)
参数部分：
["The total is ", " (", " with tax)"],30,31.5

3.“标签模板”的一个重要应用，就是过滤HTML字符串，防止用户输入恶意内容。

//防止用户输入恶意内容。
var sender = '<script>alert("abc")</script>'; // 恶意代码
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, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");

    // Don't escape special characters in the template.
    s += templateData[i];
  }
  return s;
}

message
// <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>

ES6字符串的新增方法

String.raw(); //不转义字符串模板里面会被转义的转义符。

该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法。

String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\\n5!"，显示的是转义后的结果 "Hi\n5!"

String.raw`Hi\u000A!`;
// 实际返回 "Hi\\u000A!"，显示的是转义后的结果 "Hi\u000A!"

------------

之前看到别人的问题
var path = 'dist\rev\js\rev-manifest.json';
在path里面获取绝对路径中的文件名。 但是path里面的\r是会被转义的 所以一直匹配不了\而一直不成功。 
这里就很适合用字符串和String.raw()方法，防止被转义。

String.raw`dist\rev\js\rev-manifest.json`.match(/(\w|-)*\.json/)[0];
//"rev-manifest.json"

includes(), startsWith(), endsWith() //indexOf的升级 更精细

includes(): 返回布尔值，表示是否找到了参数字符串。
startsWith(): 返回布尔值，表示参数字符串是否在源字符串的头部。
endsWith(): 返回布尔值，表示参数字符串是否在源字符串的尾部。

repeat() //返回一个新字符串，表示将原字符串重复n次。

n非负整数或字符串否则报错。非整数Math.floor()取整； 字符串先转数字再执行

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

padStart()，padEnd() //字符串补全长度的功能

如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

参数1: 补全的最大长度, 参数2: 用来补全的字符串

情况：
*如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

*如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789')
// '0123456abc'

*如果省略第二个参数，默认使用空格补全长度。

'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

常见用途：

//为数值补全指定位数。下面代码生成 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"

trimStart()，trimEnd(); //消除空格

它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

at() //继承charAt方法能返回指定位置字符外， 还增加了能识别大于0xFFFF的码点

'abc'.charAt(0) // "a" 
'????'.charAt(0) // "\\uD842"

'abc'.at(0) // "a" 
'????'.at(0) // "????"

String.fromCodePoint(); //String.fromCodePoint 方法，可以识别0xFFFF的字符，弥补了 String.fromCharCode 方法的不足。在作用上，正好与codePointAt方法相反 未用过待补充

codePointAt(); //测试一个字符由两个字节还是由四个字节组成的最简单方法 未用过待补充

normalize(); //将字符的不同表示方法统一为同样的形式.Unicode正规化 未用过待补充

资料：?
1：https://www.w3school.com.cn/j...
2：https://developer.mozilla.org...
ES6: https://www.w3cschool.cn/ecma...
ECMAScript 6 入门

mark一下 仅供参考 欢迎更正补充 end