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

141

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?

Ville Miekk-oja
quelle
2
FWIW die Linienfortsetzungen sind schwer zu lesen und spröde gegen unerwartete Leerzeichen, daher bevorzuge ich die Monte Jones-Lösung gegenüber der Codingintrigue-Lösung. FWIW Der Google Style Guide empfiehlt die Monte Jones-Lösung, und der AirBnB-Guide empfiehlt , stattdessen nur eine sehr lange Leitung zu verwenden. FWIW, ich konnte dieses Thema bei einer kurzen Überprüfung anderer Styleguides nicht finden.
Tom O'Neill

Antworten:

192

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
CodingIntrigue
quelle
1
Ich bin mir nicht sicher, was du meinst. Können Sie ein REPL-Beispiel angeben ?
CodingIntrigue
1
In meinem Fall nicht einfach, da verschiedene Variablen aus Coffeescript-Konfigurationsdateien usw. entnommen werden. Mm .. es scheint, dass es anders funktioniert, aber aus irgendeinem Grund fügt es dort leeren Raum hinzu
Ville Miekk-oja
1
Wenn Sie eine
Zeilenfortsetzung
2
Wenn Sie dies in Test verwenden, wird manchmal nicht dieselbe Zeichenfolge zurückgegeben. Ich habe meine Kopfschmerzen mit Deline gelöst, die nur ein1.1k Airbnb library
iarroyo
43
Diese Lösung funktioniert nicht gut mit Einrückungen (und Einrückungen sind in der Entwicklung üblich). Das Zeichen nach dem \ in der neuen Zeile muss das erste Zeichen in dieser Zeile sein. Das heißt, das and continues...muss an der 0. Position in der neuen Zeile beginnen und die Einrückungsregel brechen.
KingJulian
53

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`;
Monte Jones
quelle
Gut, aber ein Teil des Grundes, warum ich dies benutze, ist das Vermeiden des '+' Symbols. Es macht das Lesen von Code schwieriger und das Arbeiten ärgerlicher.
dgo
21

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'));

Doug Coburn
quelle
3
Dies ist ein sehr guter Hack, der jedoch fehlschlägt, wenn prettierin Ihrer IDE ein hübscher Formatierer (wie ) konfiguriert ist. prettierschließt dies wieder in eine einzelne Zeile ein.
Rvy Pandey
11

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.

Ian
quelle
8

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('')
Liran H.
quelle
3

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);
Raymond Wachaga
quelle
1

Ä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}`
Daniel K.
quelle
0

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();
Danielo515
quelle