7 Möglichkeiten zum Erstellen mehrzeiliger Zeichenfolgen in Javascript_Javascript-Kenntnissen

Es gibt keine Standarddarstellungsmethode für mehrzeilige Zeichenfolgen in JS. Um jedoch die Lesbarkeit der Vorlage sicherzustellen, verwenden wir zwangsläufig mehrzeilige Zeichenfolgen. Daher sind verschiedene Methoden entstanden Jade-Vorlage als Beispiel zur kurzen Zusammenfassung und zum Vergleich.

1. Hinzufügen von Zeichenfolgen

Dies ist die einfachste und am häufigsten verwendete Form, wie folgt

Code kopieren Der Code lautet wie folgt:

var tmpl =''
'!!! 5'
'html'
' include header'
' body'
' //if IE 6'
' ' .alert.alert-error'
' center Sorry, wir unterstützen IE6 nicht, bitte aktualisieren Sie Ihren Browser'
' ' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") |. IE8 offizieller Download'
' a(href="https:// www .google.com/intl/en/chrome/browser/") | Chrome-Download'
' include head'
' .container'
' .row-fluid'
' .span8'
' Hauptblock blockieren'
' Pagerleiste einschließen'
' .span4'
' Seitenleiste einschließen' ' Fußzeile einschließen'
' Skript einschließen'

Vorteile:

Leicht verständlich, einfach und zuverlässig

Flexibel genug, um JS-Logik in einer einzigen Zeichenfolge hinzuzufügen

Nachteile:

ist keine mehrzeilige Zeichenfolge im eigentlichen Sinne. Wenn Sie eine echte mehrzeilige Zeichenfolge wünschen, müssen Sie n hinzufügen

Viele Zahlen sehen aus wie Sterne, viele „und“, hässlich

2. Verwenden Sie einen Backslash

Dies ist keine sehr verbreitete Methode, aber wenn sie einmal verwendet wird, macht sie immer noch sehr süchtig >

Code kopieren Der Code lautet wie folgt:

var tmpl ='

5
html
include header
body
//if IE 6
.alert.alert-error
center Leider unterstützen wir IE6 nicht, bitte aktualisieren Sie Ihren Browser
A (href = "http://windows.microsoft.com/zh-in/internet-emplorer/download-ti") |. IE8 offizieller Download
a (href = "https://www.google.com /intl /en/chrome/browser/") | Chrome-Download
include head
.container
.row-fluid
.span8
block main
include pagerbar
. span4
Seitenleiste einschließen
Fußzeile einschließen
Skript einschließen


Vorteile:

Einfach, jede Zeile benötigt nur noch eine weitere
Hocheffizient! Diese Methode ist bei den meisten Browsern die schnellste,

Nachteile:

Fataler Fehler, jede Zeile darf keine Leerzeichen enthalten, sonst ist ein direkter Skriptfehler
keine echte mehrzeilige Zeichenfolge. Wenn Sie echte mehrzeilige Zeichenfolgen wünschen, müssen Sie n
selbst hinzufügen js-Engines unterstützen es, aber es ist nicht Teil von ECMAScript

3. String-Array-Join

Code kopieren Der Code lautet wie folgt:

var tmpl = [
'! !! 5 ' ,
'html' ,
' include header' ,
' body' ,
' //if IE 6' ,
' .alert.alert-error' ,
' center Leider unterstützen wir IE6 nicht, bitte aktualisieren Sie Ihren Browser' ,
' ' center a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download- ie") | IE8 offizieller Download' ,
' include head' ,
' .container' ,
' .row-fluid' ,
' .span8' ,
' block main' ,
' include pagerbar' ,
' .span4' ,
' include sidebar' ,
' include footer' ,
' include script'].join('n');

Vorteile:
Echte mehrzeilige Zeichenfolge

Leicht verständlich, einfach und zuverlässig
Flexibel genug, um JS-Logik in einer einzelnen Zeichenfolge hinzuzufügen

Nachteile:

Viele Zahlen und ', ", hässlich

5. String.prototype.concat

Code kopieren Der Code lautet wie folgt :

var tmpl = String.prototype.concat.call(
'!!! 5' ,
'html' ,
' include header' ,
' body' ,
' //if IE 6' ,
' .alert.alert-error' ,
center Entschuldigung, wir unterstützen IE6 nicht, bitte aktualisieren Sie Ihren Browser' ,
' a( href ="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") |. IE8 offizieller Download' ,
' ' a(href="https://www.google. com/ intl/en/chrome/browser/") | Chrome download' ,
' include head' ,
' .container' ,
' .row-fluid' ,
' .span8' ,
' Hauptblock blockieren' ,
' Pagerleiste einschließen' ,
' .span4' ,
' Seitenleiste einschließen' ,
' Fußzeile einschließen' ,
' Skript einschließen');


Vorteile:

Nicht häufig verwendet, tatsächlich ist die Concat-Methode von Zeichenfolgen weitaus seltener
Leicht zu verstehen, einfach und zuverlässig
Flexibel genug, um einer einzelnen Zeichenfolge JS-Logik hinzuzufügen

Nachteile:

Nicht wirklich eine mehrzeilige Zeichenfolge
Viele ',',", hässlich

5. hierdoc

Dies ist eine sehr clevere Lösung, die die toString-Methode der Funktion verwendet

Kopieren Sie den Code Der Code lautet wie folgt:

function heredoc(fn) {
return fn.toString().split('n').slice(1,-1).join('n') 'n'
}

var tmpl = heredoc(function(){/*
!!! 5
html
include header
body
//if IE 6
.alert.alert- Fehler
                                                                                                                                                                                           IE8 offizieller Download
. a(href="https://www.google.com/int l/en/chrome/browser/") | Chrome-Download
include head
.container
.row- Fluid
.span8
Seitenleiste einschließen
Fußzeile einschließen
Skript einschließen
*/});


Vorteile:

Keine Notwendigkeit, zusätzliche Zeichen in die Vorlagenzeichenfolge zu schreiben, sauber und einfachEine echte mehrzeilige Zeichenfolge mit Oh

Nachteile:

Sie können keine js-Logik in einer einzelnen Zeichenfolge hinzufügen.

Der Yui-Kompressor kann /* verwenden, um eine Komprimierung zu vermeiden. Über Optionen kann auch das Löschen bestimmter Elemente verhindert werden Kommentare. Das ist kein großes Problem

6. Kaffeeskript

Es ist gleichbedeutend mit dem Ändern einer Sprache. Tatsächlich ist es eine gute Wahl, die in dieser Sprache fehlenden Funktionen durch eine Sprache wie Coffeescript zu implementieren, die js als Kompilierungsziel verwendet.

Code kopieren

Der Code lautet wie folgt:

var tmpl = """
!!! 5
html
include header
body
//if IE 6
.alert.alert-error Es tut mir leid, wir unterstützen IE6 nicht, bitte aktualisieren Sie Ihren Browser
a (href = "http://windows.microsoft.com/zh-cn/internet-download-down Download
a (href="https://www.google.com/intl/en/chrome/browser/") |. Chrome-Download
include head
.container
.row-fluid
.span8
Seitenleiste einschließen
Fußzeile einschließen
Skript einschließen
"""

Vorteile:

Leicht verständlich, einfach und zuverlässig

Nachteile:

Sie müssen Coffeescript kennen

Die gesamte Datei muss in Coffeescript geschrieben sein

7. ES6

ES6 verfügt über eine neue Funktion, Template Strings. Dies ist das erste Mal, dass mehrzeilige Strings auf Sprachebene implementiert werden JavaScript kann diese Funktion nutzen, und Typescript unterstützt diese Methode ebenfalls


Code kopieren

Der Code lautet wie folgt:var tmpl = `!!! 5

html

include header
body
//if IE 6
.alert.alert-error
Center Sorry , wir unterstützen IE6 nicht, bitte aktualisieren Sie Ihren Browser
a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | (href="https://www.google.com/intl/en/chrome/browser/") |. Chrome-Download
include head
.container
.row-fluid
.span8
Hauptblock
Pagerleiste einschließen
.span4
Seitenleiste einschließen
Fußzeile einschließen
Skript einschließen

Vorteile:

Leicht verständliche, native Unterstützung
Echte mehrzeilige Zeichenfolgen

Nachteile: Eingeschränkte JS-Engine-Unterstützung

8. Zusammenfassung

Wie treffen Sie die Wahl, nachdem Sie diese Schreibmethoden gelesen haben? Wenn Sie Coffeescript verwenden, können Sie gerne die von ihm unterstützte mehrzeilige String-Schreibmethode verwenden. Wenn Sie das Problem des Entfernens von Kommentaren in Ihrem Kompressor gelöst haben, wird empfohlen, Heredoc zu verwenden Das Problem des Kompressors Frage: Verwenden Sie Backslashes zum Verbinden. Sie müssen nur ein Zeichen zu jeder Zeile hinzufügen.