网站建设防火墙级别要求,潍坊网站建设网超,沈阳网站建设技术公司,越秀区建设水务局网站目录 一.前言
二.模板字符串的使用
1.介绍 2.模板字符串 支持换行 模板字符串更适合元素写入
innerHTML模板字符串写法
3.模板字符串中#xff0c;可以运行表达式
4.模板字符串中可以运行函数 三.总结
语法#xff1a;
多行字符串#xff1a;
变量插值#xff1a; …目录 一.前言
二.模板字符串的使用
1.介绍 2.模板字符串 支持换行 模板字符串更适合元素写入
innerHTML模板字符串写法
3.模板字符串中可以运行表达式
4.模板字符串中可以运行函数 三.总结
语法
多行字符串
变量插值
代码可读性
容错性 一.前言 JavaScript中的模板字符串Template Strings也称为模板字面量是一种方便创建多行字符串和插入表达式的方式。使用模板字符串可以将变量、表达式或函数嵌入到字符串中而无需使用字符串连接操作符。模板字符串使用反引号作为字符串的定界符而不是单引号或双引号。
二.模板字符串的使用
1.介绍 模板字符串 使用 反引号 作为字符串的标识 在模板字符串中使用变量使用方法是${变量名} 模板字符串对比传统字符串拼接在写法上和功能上都有明显优势 let username 岳飞let age 36let story 打败金兀术let str 姓名:username年龄:age事迹:storyconsole.log(str);/*模板字符串使用 反引号 作为字符串的标识在模板字符串中使用变量使用方法是${变量名}*/ let str1 姓名: ${username}年龄: ${age}事迹${story}console.log(str1); 2.模板字符串 支持换行 /*模板字符串 支持换行*/let str2 姓名:${username}姓名:${age}事迹:${story}console.log(str2) 模板字符串更适合元素写入 在JavaScript中使用字符串拼接进行换行可能会导致错误或使用转义符\n插入换行符比较麻烦但使用模板字符串则不会出现此问题。而且通过使用模板字符串和innerHTML属性可以实现换行效果。相比之下模板字符串对于代码的可读性和容错性都更高。
innerHTML模板字符串写法 let btn document.getElementById(btn)let list document.getElementById(list)btn.onclick function(){let html for (let i 0; i 10; i) {html lih1${username}/h1p${age}/pp${story}/p/li}list.innerHTML html}
3.模板字符串中可以运行表达式 /*模板字符串中可以运行表达式*/let str3 11${11}console.log(str3);let str4 同时天涯沦落人${34? 莫愁前路无知己:从此消亡是路人}console.log(str4); 4.模板字符串中可以运行函数
/*
模板字符串中可以运行函数
*/
function show(){return 莫愁前路无知己
}
let str5 ${show()},凭君传语报平安
console.log(str5); 三.总结 模板字符串和字符串拼接都用于创建字符串但它们在语法和功能上有一些区别。下面是模板字符串和字符串拼接的对比总结 语法 字符串拼接使用加号或concat等方法来连接多个字符串。模板字符串使用反引号作为定界符并使用占位符${}插入变量、表达式或函数调用。 多行字符串 字符串拼接需要使用换行符和字符串连接操作符来创建多行字符串或者使用转义符\n插入换行符。模板字符串直接支持多行字符串无需使用换行符或连接操作符可以保留字符串中的换行符和缩进。 变量插值 字符串拼接需要将变量通过加号或其他方法与字符串连接起来。模板字符串可以在占位符${}中直接插入变量、表达式或函数调用并与其他字符串内容无缝搭配。 代码可读性 字符串拼接可能会造成较长、难以阅读和维护的代码尤其是在含有大量变量或复杂逻辑的情况下。模板字符串提供了更清晰、更易读的语法将变量直接嵌入字符串中使代码更易于理解和修改。 容错性 字符串拼接容易出现遗漏加号或出错的情况特别是在复杂的拼接操作中。模板字符串在插入变量或表达式时更直观且容易检查并且避免了常见的错误。
