Umbrechen Sie die Literalzeile einer langen Vorlage in eine mehrzeilige Zeile, ohne eine neue Zeile in der Zeichenfolge zu erstellen

Wie kann man in es6-Vorlagenliteralen ein langes Vorlagenliteral in mehrere Zeilen umbrechen, ohne eine neue Zeile in der Zeichenfolge zu erstellen?

Wenn Sie dies beispielsweise tun:

const text = `a very long string that just continues
and continues and continues`

Anschließend wird ein neues Liniensymbol für die Zeichenfolge erstellt, um eine neue Zeile zu erhalten. Wie kann man das lange Vorlagenliteral in mehrere Zeilen umbrechen, ohne die neue Zeile zu erstellen?

Wenn Sie eine Einführung Linie Fortsetzung ( \) an der Stelle des Newline im wörtlichen, wird es nicht eine neue Zeile auf Ausgabe erstellen:

const text = `a very long string that just continues\
and continues and continues`;
console.log(text); // a very long string that just continuesand continues and continues

Dies ist eine alte. Aber es kam auf. Wenn Sie Leerzeichen im Editor lassen, werden diese dort eingefügt.

if
  const text = `a very long string that just continues\
  and continues and continues`;

Mach einfach das normale + Symbol

if
  const text = `a very long string that just continues` +
  `and continues and continues`;

Sie könnten einfach die Zeilenumbrüche in Ihrem Vorlagenliteral essen.

// Thanks to https://twitter.com/awbjs for introducing me to the idea
// here: https://esdiscuss.org/topic/multiline-template-strings-that-don-t-break-indentation

const printLongLine = continues => {
    const text = `a very long string that just ${continues}${''
                 } and ${continues} and ${continues}`;
    return text;
}
console.log(printLongLine('continues'));

EDIT : Ich habe mit diesem Dienstprogramm ein winziges NPM-Modul erstellt. Es funktioniert im Web und in Node und ich empfehle es über den Code in meiner folgenden Antwort, da es weitaus robuster ist. Außerdem können Zeilenumbrüche im Ergebnis beibehalten werden, wenn Sie sie manuell als eingeben \n, und es werden Funktionen bereitgestellt , wenn Sie bereits Vorlagenliteral-Tags für etwas anderes verwenden: https://github.com/iansan5653/compress-tag

Ich weiß, dass ich zu spät komme, um hier zu antworten, aber die akzeptierte Antwort hat immer noch den Nachteil, dass Einrückungen nach dem Zeilenumbruch nicht zugelassen werden, was bedeutet, dass Sie immer noch keinen sehr gut aussehenden Code schreiben können, indem Sie einfach Zeilenumbrüchen entkommen.

Verwenden Sie stattdessen eine markierte Vorlagenliteralfunktion .

function noWhiteSpace(strings, ...placeholders) {
  // Build the string as normal, combining all the strings and placeholders:
  let withSpace = strings.reduce((result, string, i) => (result + placeholders[i - 1] + string));
  let withoutSpace = withSpace.replace(/\s\s+/g, ' ');
  return withoutSpace;
}

Dann können Sie einfach jedes Vorlagenliteral markieren, in das Zeilenumbrüche eingefügt werden sollen:

let myString = noWhiteSpace`This is a really long string, that needs to wrap over
    several lines. With a normal template literal you can't do that, but you can 
    use a template literal tag to allow line breaks and indents.`;

Dies hat den Nachteil, dass möglicherweise ein unerwartetes Verhalten auftritt, wenn ein zukünftiger Entwickler nicht an die Syntax der markierten Vorlage gewöhnt ist oder wenn Sie keinen beschreibenden Funktionsnamen verwenden, dies jedoch die derzeit sauberste Lösung darstellt.

Eine andere Option ist Array.join, wie folgt zu verwenden :

[
    'This is a very long string. ',
    'It just keeps going ',
    'and going ',
    'and going ',
    'and going ',
    'and going ',
    'and going ',
    'and going',
].join('')

Verwenden Sie das Alte und das Neue. Vorlagenliterale sind großartig, aber wenn Sie lange Literale vermeiden möchten, um kompakte Codezeilen zu erhalten, verketten Sie sie, und ESLint verursacht keine Probleme.

const text = `a very long string that just continues`
  +` and continues and continues`;
console.log(text);

Ähnlich wie bei Doug wird dies von meiner TSLint-Konfiguration akzeptiert und bleibt von meinem IntelliJ-Auto-Formatierer unberührt:

const text = `a very long string that just ${
  continues
} and ${continues} and ${continues}`

Die von @CodingIntrigue vorgeschlagene Lösung funktioniert bei Knoten 7 nicht. Nun, sie funktioniert, wenn ich in der ersten Zeile keine Zeilenfortsetzung verwende. Andernfalls schlägt sie fehl.

Dies ist wahrscheinlich nicht die beste Lösung, funktioniert aber ohne Probleme:

(`
    border:1px solid blue;
    border-radius:10px;
    padding: 14px 25px;
    text-decoration:none;
    display: inline-block;
    text-align: center;`).replace(/\n/g,'').trim();