WEB前端：ES6（4）：模板字符串、includes、padEnd-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43731793/article/details/103003486

本文探讨了ES6中引入的模板字符串特性，展示了如何使用模板字符串简化JavaScript中的字符串拼接，并通过实例说明了其在数组操作、DOM生成及函数调用中的应用。此外，还涉及了字符串方法如includes、padStart与padEnd的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 字符串 "" 或''
let name = "along";
let sex = "男";

// 传统的 JavaScript 语言， 输出模板通常是这样写的
let person = "\"" + name + "\"" + "'" + sex + "'";

// ES6 引入了模板字符串解决这个问题。
let person2 = `"${name}"'${sex}'`;

console.log(person, person2);

在这里插入图片描述

// 模板字符串 
let name = "along";
let sex = "男";
let person2 = '"${name}"\'${sex}\'';
person2 = person2.replace(/\$\{([^}]+)\}/g, function() {
    return eval(arguments[1]);
});
console.log(person2);

在这里插入图片描述

let arr = [1, 2, 3];
let str = `${arr.join(",")}`;
console.log(str);

在这里插入图片描述

let arr2 = ["along", "男"];
let newArr = arr2.map(function(item) {
    return `
       <li>
            ${item}
       </li>`;
});
let domHTML = `<ul>${newArr.join("")}</ul>`;
console.log(domHTML);

在这里插入图片描述

let name = "along";
let sex = "男";

function fn(arr, ...args) {
    // arr ["名字是:","性别",""] args ["along","男"]
    let str = "";
    for (let i = 0; i < args.length; i++) {
        str += (arr[i] + args[i] + "@");
    }
    return str;
}
let str = fn `名字是:${name}性别${sex}`;
console.log(str);

在这里插入图片描述

// includes返回一个布尔值， 表示某个数组是否包含给定的值
console.log("ahshjasd".includes("jea"));

// adStart() 用于头部补全， padEnd() 用于尾部补全
console.log("3".padEnd(2, 0));

在这里插入图片描述