"${variableName}"和{variableName}之间有什么区别？

Question

这两种语法`${variableName}`和{variableName}是相同的吗？

- pheromix

---

这些的上下文是什么？ - VLAZ

Answer 1

首先是JavaScript的模板字面量

根据问题标签，我猜测上下文是关于React js的。因此第二个是用于在JSX中编写JavaScript的。

例如，如果你想要在JSX中循环一个数组，可以这样做：

<div>
  {arr.map(item => <p>{item}</p>)}
</div>

但是模板字面量是纯JavaScript的功能。

模板字面量是字符串文字，允许嵌入表达式。您可以使用多行字符串和字符串插值功能。

- Dilshan

Answer 2

不，它们不是一样的。第一个是 模板字面量，用于在字符串中嵌入JavaScript变量。 例如

let name = "Rashid";
let age = 20;
console.log(`My Name is ${name} and i'm ${age} years old`);

图片示例

第二种方法是在React中使用JavaScript变量的JSX，这是JavaScript和HTML混合使用的一种方式。

例如

import "./styles.css";
let name = "Rashid";
let age = 22;
export default function App() {
  return (
    <div className="App">
      <h1>Hello {name}</h1>
      <h2>I think you are {age} years old.</h2>
    </div>
  );
}

图片示例

CodeSandBox链接

- Rashid Naveed CH

Answer 3

不，它们不是相同的东西。一个是JavaScript模板文字，即字符串插值，另一个是一个对象或可能是对象分解。或者，正如Dilshan指出的那样，是嵌入在JSX中的JavaScript表达式。所以：

let var1 = 15;
let var2 = {prop: true};
let var3 = 'text';

console.log(`${var1} ${var2} ${var3}`);

输出字符串：15 [object Object] text

以及以下内容：

let var1 = {prop: true};
let {prop} = var1;
let var2 = {var1};
console.log(var1)
console.log(prop)
console.log(var2)

将产生以下输出:

{ prop: true }
true
{ var1: { prop: true } }

由于前三个语句相等，因此可以简化为：

let var1 = {prop: true};
let prop = var1.prop;
let var2 = {var1: var1};

在JSX文件中：

import ReactDOMServer from 'react-dom/server';

let var1 = "A string"
let var2 = 34
  console.log(
    ReactDOMServer.renderToStaticMarkup(
      <ul>
        <li>{var1}</li>
        <li>{var2}</li>
      </ul>
    )
  );

将Babel将会转换为:

"use strict";

var _server = _interopRequireDefault(require("react-dom/server"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var var1 = "A string";
var var2 = 34;
console.log(_server.default.renderToStaticMarkup( /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, var1), /*#__PURE__*/React.createElement("li", null, var2))));

并且，当运行时，将输出：

<ul>
  <li>A string</li>
  <li>34</li>
</ul>

除非你本意是打这样的字：

`{variableName}`

在这种情况下，它只是一个普通的字符串，没有任何插值。如果你像这样打印出来：

console.log(`{variableName}`);

您的输出将是：

您的输出将是：

{variableName}

- kaan_a

Answer 4

${variableName} 在拼接字符串时使用：

let my_name = 'abc';
console.log(`my name is ${yourname}. Bye`)
console.log('my name is ' + yourname + '. Bye')

- Henry Le