数值方法,见菜鸟
菜鸟教程:https://www.runoob.com/w3cnote/es6-string.html
模板字符串相当于加强版的字符串,用反引号 `,使用场景:
- 作普通字符串
- 模板字符串支持多行字符串的格式换行,看起来更加简明
- 支持插入变量和表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符串</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<script>
let str1 = '123abc哈哈哈';
let arr = {
includes: function strfind(str) { // 判断某个子字符串是否在字符串中,返回布尔值
console.log(str1.includes(str));
},
startsWith: function startsWith(str, index = 0) { // 判断参数字符串是否在原字符串的头部(未传第二个参数时),如果第二个参数指定了开始查找的位置,则判断这个索引位置的子字符串是否是预期的结果,返回布尔值
console.log(str1.startsWith(str, index));
},
endsWith: function endsWith(str) { // 判断参数字符串是否在原字符串的尾部,返回布尔值
console.log(str1.includes(str));
},
indexOf: function indexOf(str) { // 从前开始查找返回索引
console.log(str1.indexOf(str));
},
lastIndexOf: function lastIndexOf(str) { // 从后开始倒着查找返回索引
console.log(str1.lastIndexOf(str));
},
repeat: function repeat(times) { // 字符串重复,括号里面指定重复的次数
// 1、参数是小数时,向下取整
// 2、参数是 0 至 -1 之间的小数,会进行取整运算,0 至 -1 之间的小数取整得到 -0 ,等同于 repeat 零次
// 3、如果参数是 NaN,等同于 repeat 零次
// 4、如果参数是负数或者无穷数:Infinity ,会报错
// 5、参数是字符串,则会先将字符串转化为数字
console.log(str1.repeat(times));
},
padStart: function padStart(minlen, padstr = ' ') { // 返回新的字符串,表示用参数字符串从头部(左侧)补全原字符串,两个参数,第一个为字符串最小补全长度,第二个是用来补全的子字符,默认是空格填充
console.log(str1.padStart(minlen, padstr));
},
padEnd: function padEnd(minlen, padstr = ' ') { // 返回新的字符串,表示用参数字符串从尾部(右侧)补全原字符串
console.log(str1.padEnd(minlen, padstr));
},
};
arr.includes('abc');
arr.startsWith('哈', 8);
arr.indexOf('b');
arr.repeat(3.8);
arr.padStart(12, '0');
console.log('1'.padStart(5));
// 模板字符串
let b1 = document.getElementById('box1');
let b2 = document.getElementById('box2');
let b3 = document.getElementById('box3');
let string1 = `hello\n你好`;
b1.innerText = string1;
let person = {
name: '孙武',
age: 76,
time: '东周'
};
let styleb2 = `style="color: red;font-size: 25px;"`;
let b2html = `<ul>
<li ${styleb2} class="li1">姓名:${person.name}</li>
<li ${styleb2} class="li2">年龄:${person.age}</li>
<li ${styleb2} class="li3">时代:${person.time}</li>
</ul>`;
// let b2html = '<ul><li class="li1"></li><li class="li2"></li><li class="li3"></li></ul>'; // 使用''不能换行,添加变量需要用加号拼接
b2.innerHTML = b2html;
</script>
</body>
</html>