JavaScript字符串与模板字符串完全指南

当前位置：点晴教程→知识管理交流 →『技术文档交流』

zhenglin

2026年2月3日 11:16 本文热度 66

JavaScript字符串与模板字符串完全指南

字符串声明的三种方式

1. 传统引号声明

let str = "hello ,world"; // 双引号
let str2='hello ,world'; // 单引号

重点解析：

双引号和单引号在功能上完全等价
代码风格统一：文档强调"坚持一种风格，遵守公司代码风格"，这是团队协作的关键
选择哪种风格取决于项目规范，但必须保持一致

2. ES6模板字符串（革命性改进）

let w='world';
let str3=`hello,${w}`; // tab上一个键
let str4="hello,"+w; // 传统拼接方式

🎯 重点代码深度解析：

let str3=`hello,${w}`

反引号(``) ：模板字符串的标识符，位于键盘Tab键上方
${w} ：插值表达式，动态插入变量值
设计背景：文档提到"其他大型语言都有字符串模版功能，js不再去拼接"，说明这是为了与其他语言保持同步

对比优势：

代码高亮：
// 传统拼接（繁琐）
let str4="hello,"+w;

// 模板字符串（简洁）
let str3=`hello,${w}`;

字符串类型系统深度解析

原始类型 vs 对象类型

let str4="abc"; // 原始string类型
let str5=new String("abc"); // String对象


console.log(typeof str4,            // "string"
            typeof str5,            // "object"
            Object.prototype.toString.call(str5) // "[object String]"
);

🎯 重点代码解析：

console.log(typeof str4, typeof str5, Object.prototype.toString.call(str5));

typeof str4 → "string"（原始类型）
typeof str5 → "object"（对象类型）
Object.prototype.toString.call(str5) → "[object String]"（精确类型检测）

自动装箱机制揭秘

console.log(str4.length,str5.length); // 都能调用length属性

关键问题："为什么简单数据类型也能调出length"？

原理：当原始类型需要调用方法时，JavaScript引擎会自动创建临时包装对象，调用完成后立即销毁。

模板字符串在DOM操作中的实战应用

HTML结构准备

代码高亮：
<div id="todos"></div>
<script>
    const todos=  [
        {id:1, text:'学习es6'},
        {id:2, text:'通读你不知道的js'}
    ]
</script>

动态内容生成核心代码

const todosEl=document.getElementById('todos');
console.log(todosEl,Object.prototype.toString.call(todosEl))


todosEl.innerHTML=`
    <ul>
    ${
        todos.map(todo =>`
        <li>${todo.text}</li>
        `).join('')
    }
    </ul>        
`

🎯 重点代码逐层解析：

1. DOM元素获取与调试

const todosEl=document.getElementById('todos');
console.log(todosEl,Object.prototype.toString.call(todosEl));

获取页面中id为"todos"的元素
调试信息帮助理解元素类型和状态

2. 模板字符串的多行优势

    <ul>
    ${...}
    </ul>        
`

多行支持：直接保持HTML缩进结构，无需\n转义
可读性：代码结构清晰，易于维护

3. map方法的核心作用

代码高亮：
todos.map(todo =>`
    <li>${todo.text}</li>
`).join('')

🎯 map方法深度解析：

输入：

[
    {id:1, text:'学习es6'},
    {id:2, text:'通读你不知道的js'}
]

处理过程：


// 第一步：map转换
[
    `<li>学习es6</li>`,
    `<li>通读你不知道的js</li>`
]


// 第二步：join('')连接
"<li>学习es6</li><li>通读你不知道的js</li>"

4. 箭头函数的演进

// 传统函数写法
console.log(todos.map(function(todo){
    return `<li>${todo.text}</li>`
}))


// ES6箭头函数简化
console.log(todos.map(todo => `<li>${todo.text}</li>`))

🎯 箭头函数简化规则：