字符串拼接方法`${}`和' '+' '用法

字符串拼接方法一: ``
``两个点里面可以放任何内容,包括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."

通过在反引号包裹的字符串中使用 ${} 语法,可以轻松地将变量、表达式等嵌入到字符串当中,实现灵活的字符串拼接,相比于传统使用加号(+)运算符进行拼接,在复杂场景下更加清晰易读,也更便于维护。

 

posted @ 2024-12-11 09:53  Shimily  阅读(195)  评论(0)    收藏  举报