js 字符串方法大全以及模板字符串用法

字符串

1 什么是字符串

单引号或者双引号引起来的字符序列。

示例：

var str = "hello";
var str = "hi";
var str = new String("hello");
console.log(typeof str); //object

2 字符串操作

charAt() 对应位置上的字符
charCodeAt() 对应位置上的字符编码
String.fromCharCode() 编码对应的字符

function fnCharAt() {
  var str = "China is great";
  //charAt()对应位置上的字符
  var ch = str.charAt(0); // C
  //charCodeAt()对应位置上的字符编码
  var chNum = str.charCodeAt(0); // 99 'a'--97
  //String.fromCharCode()编码对应的字符
  var ch2 = String.fromCharCode(90); // Z
  console.log(ch2);
}

indexOf()

从左到右找到第一个满足的字符串的位置

function fnIndexOf() {
  var str = "wlecome to beijing";
  //从左到右找到第一个满足的字符串的位置
  //找不到则返回-1
  var index = str.indexOf(" "); // 7
  var index2 = str.lastIndexOf(" "); // 10   从右往左找，编号从左往右
  console.log(index, index2);
}

substr()

字符串截取，slice()与数组slice()方法类似，substr() 和 substring()对比如下。

function fnSubstr() {
  var str = "good good study , day day up";
  //从下标为5开始，截取后面的字符串
  var substr = str.substr(5);
  //从下标为5开始，截取4个字符
  var substr2 = str.substr(5, 4); //good
  //从下标为5开始，截取后面的字符串,此时等价于substr(5)
  var substr3 = str.substring(5);
  //从下标为5开始，截取到下标为10，不包含10
  var substr4 = str.substring(5, 10);
  var substr5 = str.substring(10, 5); //等价于上面
  console.log(substr2);
}

split()

字符串分割，分割为数组， 数组可以通过 join() 连接

function fnSplit() {
  var str = "what is your name?";
  var arr = str.split(" "); //['what','is','your','name?']
  console.log(arr);
}

replace()

字符串替换 原数组不变

function fnReplace() {
  var str = "tmd,祝你幸福!,tmd,永远不见";
  // var newStr = str.replace("tmd","**"); //默认替换第一个
  var newStr = str.split("tmd").join("**");

  console.log(newStr);
}
fnReplace();

字符串颠倒

function fnReverse() {
  var str = "qwjehq";
  var str1 = str.split("").reverse().join("");
  console.log(str1);
}

3 ES6 字符串

3.1 模板字符串

1. 反单引号引起来
2. 遇到变量用 ${} 括起来
3. 原理 正则实现

let name = "lisi";
let age = 18;
let res = `My name is ${name},I am ${age} years old`;
//内部原理，正则表达式的使用
res = res.replace(/\$\{([^}]*)\}/g, function () {
  console.log(arguments);
  /* 
    [Arguments] {
     '0': '${name}',
     '1': 'name',
     '2': 11,
     '3': 'My name is ${name}, I am ${age}'
	}
	*/
  return eval(arguments[1]); // eval('name')
});
console.log(res);

3.1.1 模板字符串拼接

let info = [name, age];
let lis = info.map(function (item) {
  return `<li>${item}</li>`;
});
let ulString = `
    <ul>
        ${lis.join("")}
    </ul>
`;
document.write(ulString); //将拼接的字符串写到页面
/*   结果
<ul>
  <li>lisi</li> <li>18</li>
</ul>
 */

3.1.2 模板标签

//定义tag标签
function tag(str) {
  console.log(str);
  console.log(arguments); // {0:['My name is ',',I am ',' years old'],1:'lisi',2:18}
  let res = "";
  let arr = [];
  let arr2 = arguments[0];
  for (var k in arguments) {
    if (k != 0) {
      arr.push(arguments[k]);
    }
  }
  for (var key in arr) {
    res += arr2[key].toUpperCase() + arr[key].toString().toUpperCase();
  }
  res += arr2[arr2.length - 1].toUpperCase();
  console.log(res);
}
// 模版标签，tag标签，需要定义
let res2 = tag`My name is ${name},I am ${age} years old`;

3.2 es6 字符串操作

• startsWith()以某字串开头
• endsWith()以某字串结尾
• includes()是否包含某字串
• repeat()重复
• padStart()/padEnd()填充首部填充/尾部填充

let url = "http://www.baidu.com";
let flag = url.startsWith("Http"); // false
console.log(flag);
// endWith()
let img_name = "2.png";
let bool = img_name.endsWith("png");
console.log(bool); // true
// includes() 是否包含某字串
console.log("tom".includes("L")); // false
// repeat()
console.log("abc".repeat(3));
// padStart()/padEnd()
console.log("0".padStart(8, 9)); // 8总长度 9填充字符 '99999990'
console.log("0".padEnd(8, 9)); // 09999999