Add note on concatenating a string to an existing value

[heff]

We're in the process of converting Video.js to ES6, and one of our devs assumed that this meant all string concatenation should be replaced with string templates. In some cases though this makes the code less readable. It's more obvious when you're using more complicated variables.

const rateName = `${this.player.getPlaybackRate()}x`
// vs
const rateName = this.player.getPlaybackRate() + 'x'

The general rule we landed on was:

• When variables are being added to a string, use a string template
• When a string is being added to a variable, use concatenation

There could be a better way to say that. For the original example, see videojs/video.js#2015 (comment)

[nkbt]

Imho the rule should be super simple. If you need variables in strings, always use templates. Use strings only for plain strings. And don't use concatenation (unless it is essential for particular case and commented).
At least this is what we use in our team.

[nkbt]

If you add some code highlight, then there is no issue spotting a static suffix/prefix at all.

const rateName = `${this.player.getPlaybackRate()}x`
// vs
const rateName = this.player.getPlaybackRate() + 'x'

Or screen from WebStorm

If you use Sublime, with default color scheme for JS that might seem like a problem, but should be solvable. After all it is not a problem with code style, but with editor.

[goatslacker]

Feel free to fork the the guide for your own organization and add your own rules. You're welcome to submit a PR to the in the wild section with a link to your guide.

As for this rule, we don't follow it at Airbnb. We feel it's ok with syntax highlighting.

[heff]

No worries, thanks guys!