CODEWITHSUNDEEP
reactjsecmascript-6
Kirk Ross
Kirk Ross

Reputation: 7163

JS quote best practices? ES6 / React -- single, double, backticks?

All of these work of course, but which one is the best practice for ES6 in a jsx file? (ignoring the formatting). It is my understanding that template strings are meant mostly (solely?) for descriptive console logging and not for regular usage?

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

I realize there is no functional difference between single and double quotes (unless you are alternating between the two to avoid escaping)... but... is one or the other more common or is it "completely" a matter of 'taste' ? i.e. if you were going through code and saw single and double quotes randomly changing for the same case / usage, and you had to make it uniform, which would you use?

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

Upvotes: 30

Views: 38900

Answers (3)

alechill
alechill

Reputation: 4522

JSX

When working with JSX, best practice is to use double quotes directly (no-braces) if just a simple string, or use backtick if interpolating a variable into the string.

JSX attempts to mimics HTML attributes making it more accessible when learning for first time, and beyond that I find it provides a clear visual distinction between JSX attributes and ordinary strings when scanning code, as they are likely syntax highlighted the same colour.

More general usage

Backticks are ES6 introduction for template literals and should really only be used for that UNLESS you want to do a multiline string.

There is no difference whatsoever between the single and double quotes, however in my experience there has been for a long time a move towards using single quotes (supported by linters) simply because it makes for less cluttered readable code.

Sticking to a single code style across projects and enforcing via linting is also a good idea because it reduces escaping mistakes.

It often depends on the other languages you have used as some languages allow interpolation in one or the other or in Java for example single quotes denote char rather than String.

Usage examples

For what it's worth here's my preference for the above reasons:

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}`}} />

Upvotes: 40

Andy Ray
Andy Ray

Reputation: 32076

None of them. 

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

Double quote string literals when they are JSX attributes. Don't wrap in expression {} blocks.

For dynamic classnames, use the classnames package, not string concatenation.

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

Upvotes: 4

Shubham Khatri
Shubham Khatri

Reputation: 281932

Single or double quotes are equivalent, there is not difference between the two, they serve a use case when you want a word in string to have double quotes then you can wrap the entire string in single quotes or vice versa. However backtics are generally used when you want to resolve a variable along with the string

For example

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

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

Upvotes: 1

Related Questions