Break the string template into two lines without appending new line or whitespaces

Question

I have following string tempalte:

const someUrl = `/${currentLocale}/somecategory/${category.get('slug')}/${post.get('iD')}/${post.get('slug')}`;

The problem is that this line is too long and I have to break it, but putting simple enter in the middle of it - causes with adding new line and extra whitespaces inside the generated string.

What is the best approach to break string template into few lines just for the code style purposes ?

if it's too big to see in your code editor use your editor's word wrap feature. — ADyson, Jul 08 '16 at 08:34
It is exacly 113 characters long plus left indent. ESLint complains about that. — hsz, Jul 08 '16 at 08:34

iloahz · Accepted Answer · 2016-07-10T15:20:34.920

if you mean something like backslash in python, i'm afraid no, javascript doesn't have that.

i would recommend using + to combine multiple string segments. it's easier for you have the better-looking indent, something like:

const someUrl = `/${currentLocale}/somecategory/${category.get('slug')}` +
                `/${post.get('iD')}/${post.get('slug')}`;

or if you're using node, you may also consider util.format:

const util = require('util');

var template = '/%s/somecategory/%s/%s/%s';
var args = [currentLocale, category.get('slug'),
            post.get('iD'), post.get('slug')];

const someUrl = util.format(template, ...args);

score 1 · Answer 2 · answered Jul 08 '16 at 09:50

I find it quite difficult to read template strings that have lots of interpolation, like in your example.

Another way would be to create an array of each part and join them using Array#join:

const someUrl = '/' + [
    currentLocale,
    'somecategory',
    category.get('slug'),
    post.get('iD'),
    post.get('slug')
].join('/');

score 0 · Answer 3 · answered Jul 08 '16 at 08:43

I'm not a fan of string concatenation. So I will suggest you to remove all the whitespace in that multiline template string.

const someUrl = `
  /${currentLocale}/somecategory/
  ${category.get('slug')}/
  ${post.get('iD')}/
  ${post.get('slug')}
`.replace(/\s+/g, '');

Break the string template into two lines without appending new line or whitespaces

3 Answers3