La création de plusieurs lignes de chaînes de caractères en JavaScript
J'ai le code suivant dans Ruby. Je veux convertir ce code en JavaScript. ce qui est l'équivalent de code en JS?
text = <<"HERE"
This
Is
A
Multiline
String
HERE
Voir stackoverflow.com/a/6247331/632951
Check this out sur les différentes façons d'atteindre le même. J'ai ajouté de la performance de chaque méthode de trop stackoverflow.com/a/23867090/848841
Check this out sur les différentes façons d'atteindre le même. J'ai ajouté de la performance de chaque méthode de trop stackoverflow.com/a/23867090/848841
OriginalL'auteur Newy | 2009-04-30
Vous devez vous connecter pour publier un commentaire.
Mise à jour:
ECMAScript 6 (ES6) introduit un nouveau type de littéral, à savoir modèle de littéraux. Ils ont de nombreuses caractéristiques, interpolation de variable parmi d'autres, mais le plus important pour cette question, ils peuvent être multi-lignes.
Un modèle littérale est délimitée par backticks:
(Note: je ne dis pas utiliser le HTML dans des chaînes de caractères)
Prise en charge du navigateur est OK, mais vous pouvez utiliser transpilers pour être plus compatible.
Original ES5 réponse:
Javascript n'ont pas d'ici-document de syntaxe. Vous pouvez échapper à la traduction littérale de saut de ligne, cependant, qui vient de fermer:
Visual Studio 2010 semble être confondus par cette syntaxe.
Il est spécifié dans ECMA-262 5e Édition l'article 7.8.4 et appelé de continuation de ligne : "Une ligne de caractère de terminaison ne peut pas apparaître dans une chaîne littérale, sauf dans le cadre d'un de continuation de ligne pour produire le vide séquence de caractères. La bonne façon de provoquer une ligne de caractère de terminaison de faire partie de la Chaîne de valeur d'une chaîne de caractères littérale est l'utilisation d'une séquence d'échappement tel que \n ou \u000A."
Donc en résumé, il semble que ce soit l'approche la plus simple, compatible avec tous les navigateurs, au moins jusqu'à IE6 (et probablement plus tôt), aussi longtemps que vous ne vous souciez pas de savoir si ou non des sauts de ligne supplémentaires pourraient être ajoutés à la fin de chaque ligne. Personne ne sait qui les navigateurs/versions ajouter des retours à la ligne et qui ne l'est pas?
Je ne vois pas pourquoi vous souhaitez faire cette quand les navigateurs les traiter de façon incohérente. "ligne1\n" + "line2" sur plusieurs lignes est assez lisible et vous avez la garantie d'un comportement cohérent.
OriginalL'auteur Anonymous
ES6 mise à Jour:
Que la première réponse mentionne, avec ES6/Babel, vous pouvez maintenant créer des multi-ligne de chaînes de caractères en utilisant simplement des backticks:
D'interpolation de variables est une nouvelle fonctionnalité qui vient avec retour-tique délimité par des chaînes:
Ce juste transpiles vers le bas à la concaténation:
Original ES5 réponse:
Je ne comprends pas Google recommandation. Tous les navigateurs à l'exception de très anciennes à l'appui de la antislash suivi d'un saut de ligne approche, et continuera de le faire dans l'avenir pour assurer la compatibilité ascendante. Le seul moment où vous devez éviter si vous avez besoin d'être sûr qu'un et un seul retour à la ligne (ou pas de saut de ligne) a été ajouté à la fin de chaque ligne (voir aussi mon commentaire sur la accepté de répondre).
Notez que les chaînes du modèle ne sont pas pris en charge dans IE11, Firefox 31, Chrome 35, ou Safari 7. Voir kangax.github.io/compat-table/es6
Google recommandation est déjà documentée par eux, dans l'ordre d'importance de raisons: (1) Les espaces au début de chaque ligne (dans l'exemple, vous ne voulez pas que les espaces dans votre chaîne, mais il semble plus agréable dans le code] (2) les espaces après la barre oblique entraînera difficile erreurs [si vous la fin d'une ligne avec
\
au lieu de " \ " il est difficile d'avis] et (3) alors que la plupart des moteurs de script charge ce, il ne fait pas partie de ECMAScript [c'est à dire pourquoi utiliser des caractéristiques non standard?] Rappelez-vous, c'est un guide de style, qui est de faire un code facile à lire+maintenir+debug: non seulement "ça marche" correct.incroyable qu'après toutes ces années de concaténation de chaîne est encore le meilleur/le plus sûr/plus conforme de chemin à faire avec cela. modèle de littéraux (réponse ci-dessus) ne fonctionnent pas sous IE, et d'échapper à des lignes est juste un gâchis que vous êtes bientôt allez regretter
OriginalL'auteur Devin G Rhode
le modèle
text = <<"HERE" This Is A Multiline String HERE
n'est pas disponible en js (je me souviens de l'aide beaucoup dans ma bonne vieille Perl jours).De garder une surveillance de complexes ou de longue multiligne cordes j'ai parfois l'utilisation d'un modèle de tableau:
ou le motif anonyme déjà montré (escape saut de ligne), qui peut être un vilain bloc dans votre code:
Voici un autre bizarre, mais de travail "truc" le1:
externe edit: jsfiddle
ES20xx prend en charge couvrant les chaînes de caractères sur plusieurs lignes à l'aide de modèle de chaînes de caractères:
le1 Remarque: ce seront perdues après minifying/obfuscate votre code
Vraiment? jsperf.com/join-concat/24
Le modèle de tableau est plus lisible et la perte de performance pour une application est souvent négligeable. En tant que perf test de la montre, même IE7 peut faire des dizaines de milliers d'opérations par seconde.
+1 pour une alternative élégante qui non seulement fonctionne de la même manière dans tous les navigateurs, mais est également à l'avenir.
Vos tests de commencer avec le tableau déjà créé, qui biaise les résultats. Si vous ajoutez de l'initialisation de la matrice, droit de concaténation est plus rapide jsperf.com/string-concat-without-sringbuilder/7 Voir stackoverflow.com/questions/51185/... Comme un truc pour les retours à la ligne, il peut être OK, mais il est certainement faire plus de travail que ce qu'elle devrait
OriginalL'auteur KooiInc
Vous peut ont multiligne chaînes de caractères en JavaScript.
Cette méthode est basée sur la fabrication en série de fonctions, qui est défini à être dépendant de l'implémentation. Il fonctionne dans la plupart des navigateurs (voir ci-dessous), mais il n'y a aucune garantie que cela fonctionnera encore dans l'avenir, donc ne comptez pas sur elle.
À l'aide de la fonction suivante:
Vous pouvez avoir ici-documents comme ceci:
La méthode a été testé dans les navigateurs suivants (non mentionnés = non testé):
Être prudent avec votre minifier, cependant. Il tend à supprimer les commentaires. Pour le YUI compressor, un commentaire commençant par
/*!
(comme celui que j'ai utilisé) sera conservé.Je pense que réel solution serait d'utiliser CoffeeScript.
Quoi!? la création et la décompilation une Fonction de pirater un commentaire de plusieurs lignes dans une multiligne chaîne? Maintenant, ce laid.
C'est en fait au-delà de laid... Bien, il n'y a pas de la décompilation en cause...
jsfiddle.net/fqpwf fonctionne dans Chrome 13 et IE8/9, mais pas FF6. Je déteste dire ça, mais je l'aime, et si elle peut être une fonction intentionnelle de chaque navigateur (de sorte qu'elle ne disparaissent pas), j'aimerais l'utiliser.
Extrêmement pratique. Je l'utilise pour (Jasmin), tests unitaires, mais de les éviter pour la production de code.
OriginalL'auteur Jordão
Vous pouvez le faire...
La CDATA code (E4X) est obsolète et va bientôt cesser de travailler même dans Firefox.
e4x.js serait la bonne solution d'avenir
OriginalL'auteur
Je suis venu avec cette très jimmy truqué méthode de multi bordée de corde. Depuis la conversion d'une fonction dans une chaîne de caractères retourne également les commentaires à l'intérieur de la fonction, vous pouvez utiliser les commentaires comme le votre chaîne à l'aide d'un multilined commentaire /**/. Vous avez juste à couper les extrémités et vous avez votre chaîne.
toString()
est.stackoverflow.com/a/5571069/499214
Aussi méfiez-vous de minifiers que la bande de commentaires... 😀
C'est pourquoi nous ne pouvons pas nous avons de belles choses.
Vous pouvez faire un truc bizarre en javascript terre. Mais en toute honnêteté, vous ne devez jamais utiliser cela.
OriginalL'auteur Luke
Je suis surpris, je ne vois pas cela, parce que cela fonctionne partout ou j'ai testé et il est très utile par exemple pour les modèles:
Quelqu'un sait d'un environnement où il y a du HTML, mais ça ne fonctionne pas?
Une objection valable! Il n'est pas parfait. Mais pour les modèles, que la séparation n'est pas seulement ok, mais peut-être même encouragé.
Je préfère le fractionnement du tout 80/120 caractères en multiligne, je crains que, en plus de modèles. Maintenant, je préfère 'ligne1' + 'ligne2' la syntaxe. C'est aussi le plus rapide (bien que cela pourrait rivaliser avec elle pour vraiment grands textes). C'est une belle astuce.
en fait, c'est le HTML pas de Javascript :-/
cependant, la tâche de l'obtention d'une multiligne chaîne de caractères en javascript peut être fait de cette façon
OriginalL'auteur Peter V. Mørch
J'ai résolu ce problème par la sortie d'un div, rendant caché, et l'appel de la div id par jQuery quand j'en avais besoin.
par exemple
Puis quand j'en ai besoin pour obtenir la chaîne, je viens d'utiliser la suite de jQuery:
Qui renvoie à mon texte sur plusieurs lignes. Si je l'appelle
J'obtiens:
C'était la seule méthode qui a fonctionné pour moi pour créer un multi-ligne de javascript variable de chaîne à partir d'un Java Chaîne.
Que faire si la chaîne est de l'HTML?
$('#Id unique').contenu()
Tout ce que j'ai lu, à partir de Google ainsi que d'autres sites, a dit qu'aujourd'hui Google indexe
display:none
contenu, probablement en raison de la popularité de JavaScript, de style front-end. (Par exemple, une page de FAQ avec cacher/montrer la fonctionnalité.) Vous devez être prudent, cependant, parce que Google dit qu'ils peuvent vous punir, si le contenu masqué semble être conçu pour gonfler artificiellement votre classement SEO.OriginalL'auteur Tom Beech
Il y a plusieurs façons d'atteindre cet
1. Slash concaténation
2. régulière concaténation
3. Tableau de Rejoindre la concaténation
Performance sage, Slash concaténation (le premier) est le plus rapide.
Reportez-vous ce cas de test pour plus de détails concernant les performances
Mise à jour:
Avec le ES2015, nous pouvons profiter de ses chaînes du Modèle de fonctionnalité. Avec elle, nous avons juste besoin de l'utiliser en arrière-tiques pour la création en ligne multi chaînes
Exemple:
ne slash concaténation comprennent également les espaces en début de lignes?
OriginalL'auteur Vignesh Subramanian
À l'aide de balises de script:
<script>...</script>
bloc contenant votre texte multiligne danshead
tag;obtenir votre texte multiligne comme c'est... (attention à la text encoding: UTF-8, ASCII)
Je suis en utilisant ce avec innerText iso innerHTML, Mais comment faire en sorte que les espaces sont préservés ?
Depuis de savon est à base de XML, il faut le préserver
<![CDATA[.....]]>
.Aussi les requêtes ajax dans le cas où vous êtes en utilisant. Vous pouvez essayer de modifier votre les en-têtes de
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
je ne me souviens pas avoir d'autres problèmes que l'insertion de commentaires dans JS. Espaces où aucun problèmes.OriginalL'auteur jpfreire
J'aime cette syntaxe et indendation:
(mais en fait, ne peut être considérée comme multiligne string)
j'utilise ça aussi, et je préfère encore mettre le " + "au début de chaque nouvelle ligne ajoutée, et la finale", "sur une nouvelle ligne, parce que je l'ai trouvé plus "correcte".
mettre le + au début permet de commentaire de la ligne de production sans avoir à modifier d'autres lignes lors de sa première/dernière ligne de la séquence.
Je préfère le + à l'avant de trop car visuellement je n'ai pas besoin de scan à la fin de la ligne pour connaître le prochain est une continuation.
OriginalL'auteur semente
Il y a cette bibliothèque qui la rend belle:
https://github.com/sindresorhus/multiline
Avant
Après
nodejs
, l'aide dans le navigateur doit becareful.Les Docs de l'état, il travaille également dans le navigateur. Ce qui est logique - c'est juste
Function.prototype.String()
.ya, mais il est dit: "Alors que cela fonctionne bien dans le navigateur, il est principalement destiné à une utilisation dans Node.js. Utilisez à vos propres risques.Alors que cela fonctionne bien dans le navigateur, il est principalement destiné à une utilisation dans Node.js. Utilisez à vos propres risques." (Juste attention XD)
J'ai lu qu'une partie. Mais La Fonction.le prototype.toString() est assez stable et bien connu.
Meilleure réponse pour moi, car il a au moins atteint multiligne sans tous les déchets dans le milieu(La poubelle au début et se termine je peux traiter).
OriginalL'auteur mightyiam
Downvoters: Ce code est fourni à titre d'information seulement.
Cela a été testé dans le Fx 19 et Chrome 24 sur Mac
DÉMO
Undefined "vous" dans chrome pour os x
jsfiddle-fixe - j'ai eu le "vous", défini à l'échelle mondiale dans ma console. Fonctionne maintenant (chrome/osx). La bonne chose à propos de l'ajout d'un commentaire à une var est que vous n'êtes pas dans une fonction de cadre, jsfiddle-fonction-heredoc bien que la fonction serait cool pour les méthodes de classe. peut-être mieux de la passer remplacer {:} objet, de toute façon. amusant de pousser quelque chose de fou à la limite de toute façon 🙂
Oubliez les rageux. C'est la seule réponse correcte bar de l'ES6. Toutes les autres réponses nécessitent de concaténation, le calcul d'une certaine sorte, ou de s'échapper. C'est en fait assez cool et je vais l'utiliser comme un moyen d'ajouter de la documentation pour un jeu que je suis en train de travailler sur un passe-temps. Aussi longtemps que cette astuce n'est pas utilisé pour tout ce qui peut invoquer un bug (je peux voir comment quelqu'un ferait "point-Virgule, derp. Permet de mettre le commentaire sur la ligne suivante." et puis il se casse de votre code.) Mais, est-ce vraiment un gros problème dans mon passe-temps de jeu? Non, et je peux utiliser le truc génial pour quelque chose d'utile. Grande réponse.
Je n'ai jamais été assez courageux pour utiliser cette technique dans le code de production, mais où je NE utiliser beaucoup est dans les tests unitaires, où, souvent, il est plus facile de faire un dump de la valeur de certains de la structure (assez longue) de la chaîne et de la comparer à ce qu'il "devrait" être.
OriginalL'auteur mplungjan
pour résumer, j'ai essayé 2 méthodes énumérées ici dans l'utilisateur de programmation javascript (Opera 11.01):
Donc je vous recommande de l'approche de travail pour l'Opéra utilisateur JS utilisateurs. Contrairement à ce que l'auteur disait:
C'est Opera 11. Au moins dans de l'utilisateur scripts JS. Dommage que je ne peux pas commenter sur les réponses individuelles ou upvote la réponse, je le ferais immédiatement. Si possible, quelqu'un avec des privilèges plus élevés, veuillez le faire pour moi.
Merci à tous ceux qui, en fait, upvoted cette réponse: j'ai maintenant suffisamment de privilèges pour post normal des commentaires! Donc merci encore.
OriginalL'auteur Tyler
Mis à jour pour 2015: c'est six ans plus tard: la plupart des gens utilisent un chargeur de module et le module principal des systèmes ont chacun des moyens de chargement des modèles. Ce n'est pas en ligne, mais le type le plus commun de plusieurs lignes de chaîne sont des modèles, et modèles devraient généralement être conservés hors de la JS de toute façon.
require.js: 'exiger texte".
À l'aide de require.js 'texte' plugin, avec une multiligne modèle dans template.html
MNP/browserify: le "brfs' module
Browserify utilise un brfs' module pour charger des fichiers texte. Cela permettra de réellement construire votre modèle dans votre forfait HTML.
Facile.
OriginalL'auteur mikemaccana
Si vous êtes prêt à utiliser l'échappé des retours à la ligne, ils peuvent être utilisés bien. Il ressemble à un document avec une bordure de page.
Oui, bonne observation. Il est seulement bon pour les chaînes dont vous ne se soucient pas d'espace blanc, par exemple, HTML.
OriginalL'auteur seo
Cela fonctionne sous IE, Safari, Chrome et Firefox:
Pourquoi les downvotes? C'est une réponse créative, si pas très pratique!
non, il n'est pas. On devrait plutôt utiliser des modèles: $.tmpl() (api.jquery.com/tmpl), ou EJS (embeddedjs.com/getting_started.html), etc. L'une des raisons pour downvotes, c'est que c'est vraiment loin d'un code valide et en utilisant ce qui peut causer d'énormes problèmes d'affichage.
J'espère que personne n'a jamais utilise cette réponse dans la pratique, mais c'est une bonne idée
OriginalL'auteur stillatmycomputer
Mon extension à https://stackoverflow.com/a/15558082/80404.
Il s'attend à ce commentaire dans une forme
/*! any multiline comment */
où la symbole de ! est utilisé pour prévenir l'enlèvement minification (au moins pour YUI compressor)Exemple:
OriginalL'auteur pocheptsov
L'équivalent en javascript est:
Voici la spécification. Voir le navigateur de soutien au bas de cette page. Voici quelques exemples trop.
OriginalL'auteur Lonnie Best
Vous pouvez utiliser Tapuscrit (sur-ensemble de JavaScript), il prend en charge plusieurs lignes de cordes, et transpiles de retour vers JavaScript sans surcharge:
Si vous voulez faire la même avec du JavaScript:
A noter que l'iPad/Safari ne supporte pas
'functionName.toString()'
Si vous avez beaucoup de code legacy, vous pouvez également utiliser la plaine JavaScript variante à la Machine (pour le nettoyage):
et vous pouvez utiliser le multi-chaîne de l'objet de la plaine, JavaScript variante, où vous devez placer les modèles dans un autre fichier (que vous pouvez fusionner dans le bundle).
Vous pouvez essayer la Machine à
http://www.typescriptlang.org/Playground
Un collègue m'a dit (il a utilisé le code). N'ai pas testé myselfs. Peut aussi dépendre de l'iPad/Safari version - de manière sans doute dépend.
OriginalL'auteur Stefan Steiger
ES6 vous permet d'utiliser un backtick pour spécifier une chaîne de caractères sur plusieurs lignes. Il est appelé un Modèle Littérale. Comme ceci:
À l'aide de la backtick travaille en NodeJS, et il est pris en charge par Chrome, Firefox, Edge, Safari et Opera.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
OriginalL'auteur earl3s
Ma version de la matrice de base de rejoindre pour la chaîne concat:
Ce qui a bien fonctionné pour moi, surtout que j'ai souvent insérer des valeurs dans le code html construite de cette façon. Mais il a beaucoup de limitations. L'Indentation, ce serait bien. Ne pas avoir à traiter avec imbriqué guillemets serait vraiment sympa, et juste la bulkyness de moi.
Est la .push() pour ajouter à l'éventail de prendre beaucoup de temps? Voir cette réponse:
(Est-il une raison pour laquelle les développeurs JavaScript ne pas utiliser de Tableau.push()?)
D'après ces (opposées) de test, il ressemble .push() est très bien pour les tableaux de chaîne qui ne sera pas susceptible de croître de plus de 100 articles - je vais l'éviter en faveur de indexés ajoute pour les grandes baies.
OriginalL'auteur KTys
Vous pouvez utiliser
+=
pour concaténer votre chaîne, semble comme personne ne répondait, qui sera lisible, et aussi soignée... quelque chose comme cecipeut aussi être écrit comme
OriginalL'auteur Mr. Alien
Également noter que, lors de l'extension de la chaîne sur plusieurs lignes à l'aide de l'avant barre oblique à la fin de chaque ligne, les caractères supplémentaires (pour la plupart des espaces, des tabulations et les commentaires ajoutés par erreur) après la barre oblique inverse avant entraînera caractère inattendu d'erreur, j'ai pris une heure pour trouver
OriginalL'auteur Prakash GPz
S'il vous plaît pour l'amour de l'utilisation d'internet de concaténation de chaîne et de choisir de ne pas utiliser ES6 des solutions pour cela. ES6 n'est PAS pris en charge sur tout le tableau, à l'instar de CSS3 et certains navigateurs être lents à s'adapter à l'CSS3 mouvement. Utiliser plain ol' JavaScript, vos utilisateurs finaux vous remercie.
Exemple:
var str = "This world is neither flat nor round. "+
"Once was lost will be found";
OriginalL'auteur Pragmatiq
Vous devez utiliser l'opérateur de concaténation '+'.
En utilisant
\n
votre code source ressemblera -En utilisant
<br>
votre navigateur de sortie ressemblera -OriginalL'auteur Sonevol
Je pense que cette solution de contournement devrait fonctionner sous IE, Chrome, Firefox, Safari, Opera -
À l'aide de jQuery :
À L'Aide De Javascript :
Cheers!!
<xmp>
est donc obsolète. Il peut être permis dans le code HTML, mais ne devrait pas être utilisé par tous les auteurs. Voir stackoverflow.com/questions/8307846/...vous avez raison.. et à l'aide de
<pre>;
avec échappe à l'habitude de l'aider dans ma solution.. je suis venu à travers le même problème aujourd'hui et d'essayer de trouver une solution.. mais dans mon cas, j'ai trouvé un très n00bish moyen de corriger ce problème en mettant de sortie dans les commentaires en html au lieu de <xmp> ou toute autre balise. lol. Je sais que ce n'est pas un moyen standard pour ce faire, mais je vais travailler sur cette question plus demain bonjour.. Cheers!!Malheureusement, même avec
style="display:none"
Chrome essaie de charger tout<img>
images cités dans l'exemple de bloc.OriginalL'auteur Aditya Hajare
Juste essayé de l'Anonyme de réponse et y a trouvé une petite astuce ici, il ne fonctionne pas si il y a un espace après la barre oblique inverse
\
Donc la solution suivante ne fonctionne pas -
Mais lorsque l'espace est supprimé, cela fonctionne -
Espère que cela aide !!
OriginalL'auteur Anmol Saraf
Si vous arriver à être en cours d'exécution dans le Nœud, vous pouvez utiliser le module fs à lire dans le multi-ligne de chaîne à partir d'un fichier:
OriginalL'auteur Charles Brandt