笔记整理：关于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的拓展

目前用不上系列：

• codePointAt(); //测试一个字符由两个字节还是由四个字节组成的最简单方法 未用过待补充
• String.fromCodePoint(); //String.fromCodePoint方法，可以识别0xFFFF的字符，弥补了String.fromCharCode方法的不足。在作用上，正好与codePointAt方法相反 未用过待补充
• normalize() //Unicode正规化 未用过待补充
• at() //继承charAt方法能返回指定位置字符外， 还增加了能识别大于0xFFFF的码点

可尝试系列：

• 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"

有用系列：

• 字符串的遍历器接口 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);// "????"
  }   

• 模板字符串//用反引号（`）标识。它可以当作普通字符串使用
  *1.在模板字符串中需要使用反引号，则前面要用反斜杠转义。
  *2.使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。
  *3.trim()删除前后空格。
  *4.模板字符串中嵌入变量，变量名写在${}之中。
  *5.大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。
  *6.模板字符串之中还能调用函数。
  *7.大括号默认 toString()
  *8.能多层嵌套

  // 普通字符串
  `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}?`
  
  var greeting \=  \`\\\`Yo\\\` World!\`; //如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。
  
  //trim() 
  标签开头的空格会去掉
  console.log(`
     
  
    
  first
    
  `.trim()); //
  标签开头的空格会去掉
  
  //大括号内部
  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
  
  //模板字符串之中还能调用函数。
  function fn() {
    return "Hello World";
  }
  `foo ${fn()} bar`// foo Hello World bar
  
  //大括号默认 toString()
  var msg = `Hello, ${place}`;// 变量place没有声明报错
  `Hello ${'World'}`//大括号里面已经转了字符串 直接输出》 "Hello World"
  
  //嵌套
  const data = [
      { first: '', last: 'Bond' },
      { first: 'Lars', last: '' },
  ];
  
  const tmpl = addrs => `
    
    ${addrs.map(addr => `
      
    `).join('')}
    
  ${addr.first}
      
  ${addr.last}
  `;
  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!"
  

• 标签模板 //标签模板其实不是模板，而是函数调用的一种特殊形式
  *“标签模板”的一个重要应用，就是过滤HTML字符串，防止用户输入恶意内容。

  alert`123` // 等同于 alert(123)
  
  ---------------------
  
  var a = 5,b = 10;
  
  tag`Hello ${ a + b } world ${ a * b }`;
  // 等同于
  tag(['Hello ', ' world ', ''], 15, 50);
  
  //tag函数：
  function tag(stringArr, value1, value2){}
  //就是
  function tag(stringArr, ...values){}
  
  ---------------------
  //防止用户输入恶意内容。
  var sender = ''; // 恶意代码
  var message = SaferHTML`
  ${sender} has sent you a message.
  `;
  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, ">");
  
      // Don't escape special characters in the template.
      s += templateData[i];
    }
    return s;
  }
  
  message
  // 
  <script>alert("abc")</script> has sent you a message.

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

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