Home / Questions / 106091
Accepted
Jean Devonne
Asked: 2020-09-30 09:24:37 +0800 CST 2020-09-30 09:24:37 +0800 CST

' 单引号和 ` 反引号（反引号/反引号）有什么区别？

  • 772

你好，我想知道这两种引号之间的区别，碰巧用''你没有得到keyCode，而用'你得到了，我不明白为什么。下面是呈现场景的行的代码。

const audio = document.querySelector('audio[data-key="${e.keyCode}"]');

HTML 和脚本

<body>  
  <audio data-key="65" src="sounds/clap.wav"></audio>
  <audio data-key="83" src="sounds/hihat.wav"></audio>
  <audio data-key="68" src="sounds/kick.wav"></audio>
  <audio data-key="70" src="sounds/openhat.wav"></audio>
  <audio data-key="71" src="sounds/boom.wav"></audio>
  <audio data-key="72" src="sounds/ride.wav"></audio>
  <audio data-key="74" src="sounds/snare.wav"></audio>
  <audio data-key="75" src="sounds/tom.wav"></audio>
  <audio data-key="76" src="sounds/tink.wav"></audio>

<script>
  window.addEventListener('keydown', function(e){
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    console.log(audio);
  });
</script>
</body>

和 ''

const audio = document.querySelector('audio[data-key="${e.keyCode}"]');

在此处输入图像描述

与`

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);

**在此处输入图片描述**

javascript

2 Answers

  1. Best Answer

    当你使用反引号 `` 时，你不是在表示一个字符串本身，而是你在使用一个在 ES2015 中添加的函数，称为模板字符串，或英文的模板文字。

    ${expression}此功能允许您使用多行文本创建文本字符串，并使用您在示例中所做的将值放入其中，该示例${e.keycode}在创建最终文本字符串之前进行评估。

    该函数用于避免使用操作符连接字符串+。我举个例子：

    在模板之前，您必须这样做：

    console.log("Hola " + nombre + ", bienvenido al sitio.")

    使用文本模板，您可以更轻松：

    console.log(`Hola ${nombre}, bienvenido al sitio.`)

    这两个示例都会将变量添加nombre到您的字符串中，在这个小示例中您看不到太多好处，但是当搜索更长或多行的字符串时，它们是一个非常有用的工具。

    我给你留下了一个链接到 Mozilla 开发者网络站点，其中包含有关 JavaScript 中这个新功能的更多信息。

    • 9

  2. 倒波浪号用于使用称为 ES2015模板字符串的功能

    它允许使用可以在字符串中间引用的变量，而不必将其分成由符号连接的几个部分+

    例子

        let nombre = 'Juan';
    
    // Esto
    let saludo = 'Hola ' + nombre +  '. ¿Cómo estás?';
    console.log(saludo);
    
    // equivale a:
    let saludo2 = `Hola ${nombre}. ¿Cómo estás?`;
    console.log(saludo2);

    在您的情况下，错误是当使用单引号时''，字符串将在写入时进行评估，而不评估其中的变量${}，因此您将获得以下信息：

    var e = {
  keyCode: 13
};

console.log('audio[data-key="${e.keyCode}"]');

    虽然正确的事情是

    var e = {
  keyCode: 13
};

console.log(`audio[data-key="${e.keyCode}"]`);

    • 3