原文链接:https://www.cnblogs.com/shimily/articles/18598713
字符串拼接方法一: ``
``两个点里面可以放任何内容,包括html,js代码,不限制格式,
`${}`里面可以放变量。
字符串拼接方法二 ' '+' ' 一般用来拼接字符串和变量,如果拼接html有格式限制,代码里面不能有空格换行
let kssj = "09:00:00"; let test =`${moment().format("YYYY-MM-DD")} ${kssj} ${'测试'}` let test2 =moment().format("YYYY-MM-DD") + kssj + '测试' let test3 =`${moment().format("YYYY-MM-DD")} <br/> ${kssj} <br/> ${'测试'}` console.log(test) //2024-12-11 09:00:00 测试 console.log(test2) //2024-12-1109:00:00测试 console.log(test3) //2024-12-11 <br/> 09:00:00 <br/> 测试 let test4 =` 测试<br/> 测试 ` console.log(test4) // 测试<br/> 测试
如拼接html代码:
let test =`测试: <div class="course-line flex items-center justify-start text-shadow"> <div class="course-line-title">区队</div> <div class="course-line-txt qudui" :class="setText(pageData.currentClass?.bjmc)"> {{ pageData.currentClass?.bjmc }}</div> </div> ` console.log(test)
JavaScript 中的模板字面量(使用反引号)
反引号(``)用于定义模板字面量,它不仅可以方便地拼接字符串,还能在其中嵌入表达式,功能十分强大。
// 简单的字符串拼接 let str1 = `Hello`; let str2 = `World`; let combined = `${str1} ${str2}`; console.log(combined); // 输出 "Hello World" // 嵌入变量 let name = "Alice"; let greeting = `Hello, ${name}!`; console.log(greeting); // 输出 "Hello, Alice!" // 嵌入表达式 let num1 = 5; let num2 = 3; let result = `The sum of ${num1} and ${num2} is ${num1 + num2}.`; console.log(result); // 输出 "The sum of 5 and 3 is 8."
通过在反引号包裹的字符串中使用 ${}
语法,可以轻松地将变量、表达式等嵌入到字符串当中,实现灵活的字符串拼接,相比于传统使用加号(+
)运算符进行拼接,在复杂场景下更加清晰易读,也更便于维护。