JS引用最佳实践？ES6 / React单打，双打，后排？

Question

当然，所有这些工作，但是在一个jsx文件中，ES6的最佳实践是哪一个呢？(忽略格式)。据我所知，模板字符串主要是指(仅仅是？)用于描述性控制台日志记录，而不是用于常规使用？

<div className={`dropdown-menu dropdown-menu-media`}/>
<div className={"dropdown-menu dropdown-menu-media"}/>
<div className={'dropdown-menu dropdown-menu-media'}/>

我意识到单引号和双引号之间没有功能上的区别(除非你在两者之间交替以避免逃避)。但是..。这种或那种是比较普遍的，还是“完全”是‘品味’的问题？也就是说，如果您正在浏览代码，并且看到单引号和双引号在相同的情况/用法中随机更改，则必须使其统一，您将使用哪一个？

const inputProps = {
      onChange: this.onChange,
      className: 'form-control',
      id: "someId",
      status: 'active',
      isOpen: "open"
    };

Answer 1

在使用JSX时，最佳实践是直接使用双引号(无大括号)，如果只是一个简单的字符串，则使用回勾(如果将变量插入到字符串中)。

JSX试图模仿HTML属性，使其在第一次学习时更容易访问，除此之外，我发现它在扫描代码时提供了JSX属性和普通字符串之间的清晰的视觉区别，因为它们的语法可能突出显示相同的颜色。

在更普遍的用法中..。

Backticks是模板文字的ES6介绍，除非您想要执行多行字符串，否则应该只使用它。

单引号和双引号之间没有任何区别，不过，在我的经验中，很长一段时间以来，人们一直倾向于使用单引号(由指针支持)，仅仅是因为它减少了可读性代码的混乱。

坚持跨项目的单一代码样式并通过linting强制执行也是一个好主意，因为这样可以减少转义错误。

它通常取决于您使用过的其他语言，因为有些语言允许在其中一种或另一种语言中进行插值，例如，单引号表示char而不是String。

不管有什么价值，这是我对上述原因的偏爱.

const awardWinningActor = 'Nic Cage'

const oscarNight = `And the award for Best Actor goes to ${awardWinningActor}`

const winnersSpeech = `Some really long but also totally awesome amazing speech
and also possibly some screaming and a leather jacket slung into the crowd`

<NicCage oscarFor="Best Actor" says={`Here's my ${winnersSpeech}`}} />

Answer 2

他们都不是。

<div className="dropdown-menu dropdown-menu-media"/>

双引号字符串文字，当它们是JSX属性时。不要将表达式{}块包装起来。

对于动态类名，请使用类名包，而不是字符串连接。

<div className={
    classNames('dropdown-menu dropdown-menu-media', this.props.className)
}/>

Answer 3

单引号或双引号是等价的，两者之间没有区别，当您希望字符串中的单词有双引号时，它们提供了一个用例，然后可以用单引号包装整个字符串，反之亦然。但是，当您想要与字符串一起解析变量时，通常使用回溯。

例如

const inputProps = {
      onChange: this.onChange,
      className: 'form-control',
    };

<div className={`dropdown-menu dropdown-menu-media ${inputProps.className}`}/>