模板字符串 ES6防止断行

我有一个很长的字符串,它是用 ES6模板字符串构建的,但我希望它没有换行符:

var string = `As all string substitutions in Template Strings are JavaScript
expressions, we can substitute a lot more than variable names.
For example, below we can use expression interpolation to
embed for some readable inline math:`


console.log(string);

结果:

As all string substitutions in Template Strings are JavaScript
expressions, we can substitute a lot more than variable names.
For example, below we can use expression interpolation to
embed for some readable inline math:

我的期望:

As all string substitutions in Template Strings are JavaScript expressions, we can substitute a lot more than variable names. For example, below we can use expression interpolation to embed for some readable inline math:
50340 次浏览

A line break is a line break... If you produce them manually, I find very expectable that you get them during run-time.

BTW, I find three workarounds for now:

  1. Configure your IDE or code editor to do word wrap so you won't need to add line breaks in your code if you don't need them: your editor will break your code in two or more lines if each code sentence goes beyond configured maximum characters.

  2. Remove line breaks with String.prototype.replace:

var string = `As all string substitutions in Template Strings are JavaScript
expressions, we can substitute a lot more than variable names.
For example, below we can use expression interpolation to
embed for some readable inline math:`.replace(/\n/gm,"");

Caution: here you're running a function runtime to format your buildtime code, which might look like an anti-pattern, and have performance impact

  1. Perform these code line breaks using concatenations:
var string = `As all string substitutions in Template Strings are JavaScript`
+ `expressions, we can substitute a lot more than variable names.`
+ `For example, below we can use expression interpolation to`
+ `embed for some readable inline math:`;

In my case, I would go with #1 option.

I personally prefer the look of joining an array instead:

var string = [
`As all string substitutions in Template Strings are JavaScript`,
`expressions, we can substitute a lot more than variable names.`,
`For example, below we can use expression interpolation to`,
`embed for some readable inline math:`
].join(' ');

If you have ES6, you can use tags. For instance, the stripIndent tag from the common-tags library:

Install via:

npm install common-tags --save

Require via:

const stripIndent = require('common-tags/lib/stripIndent')

Use as:

stripIndent`
As all string substitutions in Template Strings are JavaScript
expressions, we can substitute a lot more than variable names.
For example, below we can use expression interpolation to
embed for some readable inline math:
`

Edit: As mentioned in the comments, you likely need to pick the: const oneLine = require('common-tags/lib/oneLine') tag for your desired outcome.

More info on the aforementioned common-tags link as well as on this blog

This is insane.

Almost every single answer here suggest running a function runtime in order to well-format, buildtime bad-formatted text oO Am I the only one shocked by that fact, especially performance impact ???

As stated by @dandavis, the official solution, (which btw is also the historic solution for unix shell scripts), is to escape the carriage return, well, with the escape character : \

`foo \
bar` === 'foo bar'

Simple, performant, official, readable, and shell-like in the process

  • Either configure IDE to make wraps and use template string 1-liner, as in your 1st code snippet.

  • Either use \ escape literal char just before the line breaks.

    Example:

    const string = `1st line\
    2nd line\
    3rd line`;
    

    But it will not save you from issues with space-aligning.

  • Either use old-school ES5 concatenation with '+'.

    Example:

    const string = '1st line' +
    '2nd line' +
    '3rd line';
    
  • Either use hack with template empty string var ${''}:

    Example:

    const string = `1st line${''
    }2nd line${''
    }3rd line`;
    

The 1st way is much more better, cause:

  • less symbols (size aspect)
  • no runtime operations (perfomance aspect)

In ES6, I prefer using a combination of the two top answers here (\ in combination with .replace()). The benefit of combining the replace function with the escape character means you can keep your codeblock consistently formatted with the rest of your code.

/\s{2}/g is a regular expression selecting any instance of two or more back-to-back spaces.

const myMessage = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id urna \
ligula. Suspendisse lobortis ex ut vestibulum venenatis. Donec imperdiet ante odio, \
nec malesuada diam tristique eget. Lorem ipsum dolor sit amet, consectetur adipiscing \
elit. Cras in vulputate tellus.`
.replace(/\s{2,}/g, "");

This outputs a plain, unbroken string.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id urna ligula. Suspendisse lobortis ex ut vestibulum venenatis. Donec imperdiet ante odio, nec malesuada diam tristique eget. Lorem ipsum dolor sit amet, consectetur elit. Cras in vulputate tellus."

For paragraphs, you can use the \s+ regex to replace white space runs with a single space so it will work for line breaks as well as the indentations. So, in your case, just add .replace(/\s+/gm, ' ') at the end.

var string = `As all string substitutions in Template Strings are JavaScript
expressions, we can substitute a lot more than variable names.
For example, below we can use expression interpolation to
embed for some readable inline math:`.replace(/\s+/gm, ' ');


console.log(string);

Although it's not the typical usage for template strings, it's worth mentioning. You can just make use of the string interpolation, it can be as simple as this


const str = `some long text on ${
"multiple" } lines without any extra ${
"spaces" } or line breaks and readable.`;


console.log(str);
// "some long text on multiple lines without any extra spaces or line breaks and readable."