整理总结:关于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

阅读 384

推荐阅读
喈喱前端笔记
用户专栏

学习的付出 从不欺人

4 人关注
31 篇文章
专栏主页