7 façons de créer des chaînes multilignes dans les compétences javascript_javascript

Il n'existe pas de méthode de représentation standard des chaînes multilignes en JS, mais lors de l'utilisation de modèles, afin de garantir la lisibilité du modèle, nous utilisons inévitablement des chaînes multilignes, donc diverses méthodes ont émergé, voici une. modèle de jade comme exemple pour résumer et comparer brièvement.

1. Ajout de chaînes

Il s'agit de la forme la plus simple et la plus couramment utilisée, comme suit

Copier le code Le code est le suivant :

var tmpl =''
'!!! 5'
'html'
' include header'
'body'
' //if IE 6'
' ' .alert.alert-error'
' center Désolé, nous ne prenons pas en charge IE6, veuillez mettre à jour votre navigateur'
' ' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | Téléchargement officiel d'IE8'
' a(href="https:// www .google.com/intl/en/chrome/browser/") | Téléchargement Chrome'
'inclut la tête'
' .container'
' .row-fluid'
' .span8'
'bloquer principal'
'inclure la barre de pager'
'.span4'
'inclure la barre latérale' 'inclure le pied de page'
'inclure le script'

Avantages :

Facile à comprendre, simple et fiable

Assez flexible pour ajouter une logique js dans une seule chaîne

Inconvénients :

n'est pas une chaîne multiligne au vrai sens du terme. Si vous voulez du vrai multiligne, vous devez ajouter n

Beaucoup de nombres ressemblent à des étoiles, beaucoup de ' et ", moche

2. Utilisez une barre oblique inverse

C'est ce qu'on appelle le caractère de continuation de ligne. Ce n'est pas une méthode très courante, mais une fois utilisée, elle est toujours très addictive. >

Copier le code Le code est le suivant :var tmpl ='

!!!

html
include header
body
//if IE 6
.alert.alert-error
center Désolé, nous ne prenons pas en charge IE6, veuillez mettre à jour votre navigateur
A (href = "http://windows.microsoft.com/zh-in/internet-emplorer/download-ti") | Téléchargement officiel d'IE8
a (href = "https://www.google.com /intl /en/chrome/browser/") | Téléchargement Chrome
include head
.container
.row-fluid
.span8
block main
include pagerbar
. span4
inclure la barre latérale
inclure le pied de page
inclure le script'


Avantages :

Simple, chaque ligne n'en nécessite qu'une de plus
Très efficace ! Cette méthode est la plus rapide sur la plupart des navigateurs,

Inconvénients :

Défaut fatal, chaque ligne ne doit pas avoir d'espaces, sinon une erreur de script directe
n'est pas une vraie chaîne multiligne. Si vous voulez de vraies chaînes multilignes, vous devez ajouter n
vous-même. js le prend en charge, mais il ne fait pas partie d'ECMAScript

3. Joindre un tableau de chaînes

Copier le code Le code est le suivant :

var tmpl = [
'! !! 5 ' ,
'html' ,
'inclut l'en-tête' ,
'body' ,
' //if IE 6' ,
' .alert.alert-error' ,
' center Désolé, nous ne prenons pas en charge IE6, veuillez mettre à jour votre navigateur' ,
' ' center a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download- ie") | Téléchargement officiel d'IE8' ,
'include head' ,
' .container' ,
' .row-fluid' ,
' .span8' ,
' block main' ,
'inclut la barre de page' ,
' .span4' ,
'inclut la barre latérale' ,
'inclut le pied de page' ,
'inclut le script'].join('n');

Avantages :
Véritable chaîne multiligne

Facile à comprendre, simple et fiable
Assez flexible pour ajouter une logique js dans une seule chaîne

Inconvénients :

Beaucoup de chiffres et ', ", moche

5. String.prototype.concat

Copier le code Le code est le suivant :

var tmpl = String.prototype.concat.call(
'!!! 5' ,
'html' ,
'inclut l'en-tête' ,
' body' ,
' //if IE 6' ,
' .alert.alert-error' ,
center Désolé, nous ne prenons pas en charge IE6, veuillez mettre à jour votre navigateur' ,
' a( href ="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | Téléchargement officiel d'IE8' ,
' ' a(href="https://www.google. com/ intl/en/chrome/browser/") | Téléchargement Chrome' ,
'include head' ,
' .container' ,
' .row-fluid' ,
' .span8' ,
'block main' ,
'include pagerbar' ,
' .span4' ,
'inclut la barre latérale' ,
'inclut le pied de page' ,
'inclut le script');


Avantages :

Pas couramment utilisée, en fait la méthode concat de chaînes est beaucoup moins courante
Facile à comprendre, simple et fiable
Assez flexible pour ajouter une logique js à une seule chaîne

Inconvénients :

Pas vraiment une chaîne multiligne
Beaucoup de ',',", moche

5. Hérédoc

C'est une solution très astucieuse, utilisant la méthode de fonction toString

Copiez le code Le code est le suivant :

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- erreur
                                                                                                                                                                                            Téléchargement officiel d'IE8
a(href="https://www.google.com/intl /fr/chrome/browser/") | Téléchargement Chrome
include head
.container
.row- fluid
.span8
include sidebar
include footer
include script
*/});


Avantages :

Pas besoin d'écrire des caractères supplémentaires dans la chaîne du modèle, propre et simpleUne véritable chaîne multiligne, avec Oh

Inconvénients :

Vous ne pouvez pas ajouter de logique js dans une seule chaîne

Il est facile d'être compressé par le compresseur. Le compresseur Yui peut utiliser /* pour éviter d'être compressé et gcc peut également être configuré via des options pour ne pas supprimer des éléments spécifiques. commentaires. Ce n'est pas un gros problème

6. caféscript

Cela équivaut à changer de langage. En fait, c'est un excellent choix pour implémenter les fonctions qui manquent dans ce langage via un langage comme coffeescript qui utilise js comme cible de compilation.

Copier le code

Le code est le suivant :

var tmpl = """
!!! 5
html
include header
body
//if IE 6
.alert.alert-error Je suis désolé, nous ne prenons pas en charge IE6, veuillez mettre à jour votre navigateur
a (href = "http://windows.microsoft.com/zh-cn/internet-download-down Télécharger
a (href="https://www.google.com/intl/en/chrome/browser/") | Téléchargement Chrome
include head
.container
.row-fluid
.span8
Inclure la barre latérale
inclure le pied de page
inclure le script
"""

Avantages :

Facile à comprendre, simple et fiable

Inconvénients :

Besoin de connaître coffeescript

L'intégralité du fichier doit être écrite en coffeescript

7. ES6

ES6 a une nouvelle fonctionnalité, Template Strings. C'est la première fois que des chaînes multilignes sont implémentées au niveau du langage dans Chrome Canary Experimental. JavaScript peut utiliser cette fonctionnalité, et TypeScript prendra également en charge cette méthode


Copier le code

Le code est le suivant :var tmpl = `!!! 5

html

include header
body
//if IE 6
.alert.alert-error
Centre Désolé , nous ne prenons pas en charge IE6, veuillez mettre à jour votre navigateur
a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | Téléchargement officiel d'IE8
a (href="https://www.google.com/intl/en/chrome/browser/") | Téléchargement de Chrome
include head
.container
.row-fluid
.span8
bloquer le principal
inclure la barre de pager
.span4
inclure la barre latérale
inclure le pied de page
inclure le script`

Avantages :

Facile à comprendre, support natif

Véritables chaînes multilignes
Inconvénients :

Support limité du moteur JS

8.Résumé

Après avoir lu ces méthodes d'écriture, comment choisissez-vous ? Si vous utilisez coffeescript, n'hésitez pas à utiliser la méthode d'écriture de chaîne multiligne qu'elle prend en charge ; si vous êtes sur le client et que vous avez résolu le problème de suppression des commentaires dans votre compresseur, il est recommandé d'utiliser heredoc ; le problème du compresseur Question, utilisez des barres obliques inverses pour vous connecter. Il vous suffit d'ajouter un caractère à chaque ligne.