嵌入JavaScript

原创已于 2024-01-25 12:22:57 修改 · 474 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2024-01-24 17:35:36 首次发布

`1.${ }`

在模板字面量中，你可以在 ${ } 中包装 JavaScript 变量或表达式，其结果将被包含在字符串中：

const name = "克里斯";
const greeting = `你好，${name}`;
console.log(greeting); // "你好，克里斯"

可以使用相同的技术来连接两个变量：

const one = "你好，";
const two = "请问最近如何？";
const joined = `${one}${two}`;
console.log(joined); // "你好，请问最近如何？"

像这样连接字符串被称为串联（concatenation）。

2.例子：

<button>按这里</button>
<div id="greeting"></div>

<script>
      const button =document.querySelector("button");

      function greet(){
      const name = prompt("你叫什么？");
      const greeting = document.querySelector("#greeting");
      greeting.textContent = `你好，${name}!很高兴见到你`;
      }
        
      button.addEventListener("click",greet);
</script>

结果展示：

点击按钮，出现弹窗输入222：

3.+连接字符串

const greeting = "你好";
const name = "克里斯";
console.log(greeting + "，" + name); // "你好，克里斯"

模板字面量通常更具可读性：

const greeting = "你好";
const name = "克里斯";
console.log(`${greeting}，${name}`); // "你好，克里斯"

4.字符串包含表达式

<script>
    const song = "青花瓷";
    const score = 9;
    const highestScore = 10;
    const output = `我喜欢歌曲《${song}》。我给它打了 ${(score / highestScore) * 100} 分`;
</script>

结果展示：

5.\n换行

const newline = "你好，\n再见";

结果展示：

6.字符串内包含引号

①两个双引号不一样

        const good1 = '你好，"再见"';
        const good2 = `你好"再见"`;

结果展示：

②两个双引号

const good3 = "你好"再见"";

这是一句错误的语句，结果展示：

7.字符串包含转义字符

const b = 'I\'m nell';

结果展示：

8.数字与字符串连接

const name = "Nell ";
const number = 999;

结果展示：

9.参数转换

const myString = "123";
const myNum = Number(myString);

结果展示：

const myNum2 = 123;
const myString2 = String(myNum2);

结果展示：