Création de chaînes multilignes en JavaScript
J'ai le code suivant en Ruby. Je veux convertir ce code en JavaScript. quel est le code équivalent dans JS?
text = <<"HERE"
This
Is
A
Multiline
String
HERE
Mise à jour:
ECMAScript 6 (ES6) introduit un nouveau type de littéral, à savoir gabarits littéraux . Ils ont de nombreuses caractéristiques, une interpolation variable parmi d’autres, mais le plus important pour cette question, ils peuvent être multilignes.
Un littéral de modèle est délimité par des antécédents :
var html = `
<div>
<span>Some HTML here</span>
</div>
`;
(Remarque: je ne préconise pas l'utilisation de HTML dans les chaînes)
Le support du navigateur est correct , mais vous pouvez utiliser transpilers pour être plus compatible.
Réponse originale de l'ES5:
Javascript n'a pas de syntaxe ici-document. Vous pouvez toutefois échapper à la nouvelle ligne littérale qui se rapproche:
"foo \
bar"
Mise à jour ES6:
Comme le mentionne la première réponse, avec ES6/Babel, vous pouvez maintenant créer des chaînes multilignes simplement en utilisant des backticks:
const htmlString = `Say hello to
multi-line
strings!`;
L'interpolation de variables est une nouvelle fonctionnalité populaire fournie avec des chaînes délimitées par un tick arrière:
const htmlString = `${user.name} liked your post about strings`;
Cela se résume à la concaténation:
user.name + ' liked your post about strings'
Réponse originale de l'ES5:
Guide de style JavaScript de Google recommande d'utiliser la concaténation de chaînes au lieu d'échapper aux nouvelles lignes:
Ne faites pas ceci:
var myString = 'A rather long string of English text, an error message \ actually that just keeps going and going -- an error \ message to make the Energizer bunny blush (right through \ those Schwarzenegger shades)! Where was I? Oh yes, \ you\'ve got an error and all the extraneous whitespace is \ just gravy. Have a Nice day.';Les espaces au début de chaque ligne ne peuvent pas être supprimés en toute sécurité au moment de la compilation; les espaces après la barre oblique entraîneront des erreurs délicates; et bien que la plupart des moteurs de script le prennent en charge, cela ne fait pas partie d’ECMAScript.
Utilisez plutôt la concaténation de chaînes:
var myString = 'A rather long string of English text, an error message ' + 'actually that just keeps going and going -- an error ' + 'message to make the Energizer bunny blush (right through ' + 'those Schwarzenegger shades)! Where was I? Oh yes, ' + 'you\'ve got an error and all the extraneous whitespace is ' + 'just gravy. Have a Nice day.';
le motif text = <<"HERE" This Is A Multiline String HERE n'est pas disponible en js (je me souviens de l'avoir beaucoup utilisé à mon époque).
Pour garder le contrôle sur les chaînes multilignes complexes ou longues, j'utilise parfois un modèle de tableau:
var myString =
['<div id="someId">',
'some content<br />',
'<a href="#someRef">someRefTxt</a>',
'</div>'
].join('\n');
ou le motif anonyme déjà montré (échappe nouvelle ligne), ce qui peut être un bloc moche dans votre code:
var myString =
'<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';
Voici un autre "truc" bizarre mais qui fonctionne1:
var myString = (function () {/*
<div id="someId">
some content<br />
<a href="#someRef">someRefTxt</a>
</div>
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
modification externe: jsfiddle
ES20xx prend en charge l'étalement de chaînes sur plusieurs lignes à l'aide de chaînes de modèle :
let str = `This is a text
with multiple lines.
Escapes are interpreted,
\n is a newline.`;
let str = String.raw`This is a text
with multiple lines.
Escapes are not interpreted,
\n is not a newline.`;
1 Remarque: ceci sera perdu après avoir minimisé/obscurci votre code
Vous pouvez disposer de chaînes multilignes en JavaScript pur.
Cette méthode est basée sur la sérialisation des fonctions, qui est définie comme dépendant de la mise en oeuvre . Cela fonctionne dans la plupart des navigateurs (voir ci-dessous), mais rien ne garantit qu'il fonctionnera encore dans le futur, alors ne vous fiez pas à cela.
En utilisant la fonction suivante:
function hereDoc(f) {
return f.toString().
replace(/^[^\/]+\/\*!?/, '').
replace(/\*\/[^\/]+$/, '');
}
Vous pouvez avoir ici des documents comme celui-ci:
var tennysonQuote = hereDoc(function() {/*!
Theirs not to make reply,
Theirs not to reason why,
Theirs but to do and die
*/});
La méthode a été testée avec succès dans les navigateurs suivants (non mentionné = non testé):
- IE 4 - 10
- Opera 9.50 - 12 (pas en 9-)
- Safari 4 - 6 (pas dans 3-)
- Chrome 1 - 45
- Firefox 17 - 21 ( pas dans 16 - )
- Rekonq 0.7.0 - 0.8.0
- Non pris en charge dans Konqueror 4.7.4
Soyez prudent avec votre minifier, cependant. Cela a tendance à supprimer les commentaires. Pour le compresseur YUI , un commentaire commençant par /*! (comme celui que j'ai utilisé) sera conservé.
Je pense qu'une solution réelle consisterait à utiliser CoffeeScript .
Tu peux le faire...
var string = 'This is\n' +
'a multiline\n' +
'string';
Je suis venu avec cette méthode très jimmy rigged d'une chaîne multi-ligné. Étant donné que la conversion d'une fonction en chaîne renvoie également les commentaires qu'elle contient, vous pouvez les utiliser comme chaîne à l'aide d'un commentaire multiligne/** /. Vous devez juste couper les extrémités et vous avez votre chaîne.
var myString = function(){/*
This is some
awesome multi-lined
string using a comment
inside a function
returned as a string.
Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)
alert(myString)
Je suis surpris de ne pas l'avoir vu, car cela fonctionne partout où je l'ai testé et est très utile, par exemple. modèles:
<script type="bogus" id="multi">
My
multiline
string
</script>
<script>
alert($('#multi').html());
</script>
Est-ce que quelqu'un connaît un environnement où il y a du HTML mais cela ne fonctionne pas?
J'ai résolu ce problème en affichant un div, en le masquant, et en appelant l'identifiant div par jQuery lorsque j'en avais besoin.
par exemple.
<div id="UniqueID" style="display:none;">
Strings
On
Multiple
Lines
Here
</div>
Ensuite, lorsque j'ai besoin d'obtenir la chaîne, j'utilise simplement le jQuery suivant:
$('#UniqueID').html();
Ce qui retourne mon texte sur plusieurs lignes. Si j'appelle
alert($('#UniqueID').html());
Je reçois:
Utilisation de balises de script:
- ajoutez un bloc
<script>...</script>contenant votre texte multiligne dans la balisehead; obtenez votre texte multiligne tel quel ... (faites attention au codage de texte: UTF-8, ASCII)
<script> // pure javascript var text = document.getElementById("mySoapMessage").innerHTML ; // using JQuery's document ready for safety $(document).ready(function() { var text = $("#mySoapMessage").html(); }); </script> <script id="mySoapMessage" type="text/plain"> <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:typ="..."> <soapenv:Header/> <soapenv:Body> <typ:getConvocadosElement> ... </typ:getConvocadosElement> </soapenv:Body> </soapenv:Envelope> <!-- this comment will be present on your string --> //uh-oh, javascript comments... SOAP request will fail </script>
Il y a plusieurs façons d'y parvenir
1. Concaténation par barre oblique
var MultiLine= '1\
2\
3\
4\
5\
6\
7\
8\
9';
2. concaténation régulière
var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';
3. Concaténation de jointure de tableau
var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');
Performance sage, concaténation Slash (le premier) est le plus rapide.
Reportez-vous à ce cas de test pour plus de détails sur les performances
Mise à jour:
Avec le ES2015 , nous pouvons tirer parti de sa fonction Chaîne de modèle. Avec cela, nous avons juste besoin d’utiliser des ticks arrière pour créer des chaînes multilignes
Exemple:
`<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`
J'aime cette syntaxe et indendation:
string = 'my long string...\n'
+ 'continue here\n'
+ 'and here.';
(mais ne peut en réalité être considéré comme une chaîne multiligne)
Il y a cette bibliothèque qui la rend belle:
https://github.com/sindresorhus/multiline
Avant
var str = '' +
'<!doctype html>' +
'<html>' +
' <body>' +
' <h1>❤ unicorns</h1>' +
' </body>' +
'</html>' +
'';
Après
var str = multiline(function(){/*
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>
*/});
Downvoters : Ce code est fourni à titre d'information seulement.
Cela a été testé dans Fx 19 et Chrome 24 sur Mac
var new_comment; /*<<<EOF
<li class="photobooth-comment">
<span class="username">
<a href="#">You</a>
</span>
<span class="comment-text">
$text
</span>
<span class="comment-time">
2d
</span>
</li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag
new_comment=document.currentScript.innerHTML.split("EOF")[1];
alert(new_comment.replace('$text','Here goes some text'));
en résumé, j'ai essayé 2 approches listées ici en programmation javascript utilisateur (Opera 11.01):
- celui-ci n'a pas fonctionné: Création de chaînes multilignes en JavaScript
- cela a assez bien fonctionné, j'ai également compris comment le rendre beau en mode source Notepad ++: Création de chaînes multilignes en JavaScript
Je recommande donc l’approche de travail pour Opera utilisateurs JS. Contrairement à ce que l'auteur disait:
Cela ne fonctionne pas sur firefox ou opera; seulement sur IE, chrome et safari.
Cela fonctionne dans Opera 11. Au moins dans les scripts utilisateur JS. Dommage que je ne puisse pas commenter les réponses individuelles ni faire passer la réponse au vote up up, je le ferais immédiatement Si possible, quelqu'un avec des privilèges plus élevés s'il vous plaît le faire pour moi.
Si vous êtes prêt à utiliser les nouvelles lignes échappées, vous pouvez les utiliser sans problème . Cela ressemble à un document avec une bordure de page.
Mis à jour pour 2015 : six ans plus tard à présent: la plupart des gens utilisent un chargeur de modules et les systèmes de modules principaux disposent chacun de méthodes de chargement des modèles. Ce n'est pas inline, mais le type le plus courant de chaîne multiligne sont les modèles, et les modèles doivent généralement être conservés en dehors de JS .
require.js: 'nécessite un texte'.
Utilisation de plugin 'require' text ' , avec un modèle multiligne dans template.html
var template = require('text!template.html')
NPM/browserify: le module 'brfs'
Browserify tilise un module 'brfs' pour charger des fichiers texte. Cela construira réellement votre modèle dans votre HTML fourni.
var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');
Facile.
L'équivalent en javascript est:
var text = `
This
Is
A
Multiline
String
`;
Voici le spécification . Voir la prise en charge du navigateur au bas de cette page . Voici quelques exemples aussi.
Mon extension à https://stackoverflow.com/a/15558082/80404 . Il attend un commentaire sous une forme /*! any multiline comment */ où le symbole! est utilisé pour empêcher le retrait par minification (au moins pour le compresseur YUI)
Function.prototype.extractComment = function() {
var startComment = "/*!";
var endComment = "*/";
var str = this.toString();
var start = str.indexOf(startComment);
var end = str.lastIndexOf(endComment);
return str.slice(start + startComment.length, -(str.length - end));
};
Exemple:
var tmpl = function() { /*!
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
*/}.extractComment();
Cela fonctionne dans IE, Safari, Chrome et Firefox:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class="crazy_idea" thorn_in_my_side='<table border="0">
<tr>
<td ><span class="mlayouttablecellsdynamic">PACKAGE price $65.00</span></td>
</tr>
</table>'></div>
<script type="text/javascript">
alert($(".crazy_idea").attr("thorn_in_my_side"));
</script>
Vous pouvez utiliser TypeScript (JavaScript SuperSet), il prend en charge les chaînes multilignes et retransmet en JavaScript pur sans surcharge:
var templates = {
myString: `this is
a multiline
string`
}
alert(templates.myString);
Si vous souhaitez accomplir la même chose avec du JavaScript simple:
var templates =
{
myString: function(){/*
This is some
awesome multi-lined
string using a comment
inside a function
returned as a string.
Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)
}
alert(templates.myString)
Notez que l'iPad/Safari ne prend pas en charge 'functionName.toString()'
Si vous avez beaucoup de code hérité, vous pouvez également utiliser la variante JavaScript simple dans TypeScript (à des fins de nettoyage):
interface externTemplates
{
myString:string;
}
declare var templates:externTemplates;
alert(templates.myString)
et vous pouvez utiliser l'objet multiline-string de la variante JavaScript simple, où vous placez les modèles dans un autre fichier (que vous pouvez fusionner dans le bundle).
Vous pouvez essayer TypeScript à
http://www.typescriptlang.org/Playground
ES6 vous permet d’utiliser un backtick pour spécifier une chaîne sur plusieurs lignes. C'est ce qu'on appelle un modèle littéral. Comme ça:
var multilineString = `One line of text
second line of text
third line of text
fourth line of text`;
L'utilisation du backtick fonctionne dans NodeJS et est prise en charge par Chrome, Firefox, Edge, Safari et Opera.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Le moyen le plus simple de créer des chaînes multilignes dans Javascrips consiste à utiliser des backticks (``). Cela vous permet de créer des chaînes multilignes dans lesquelles vous pouvez insérer des variables avec ${variableName}.
Exemple:
let name = 'Willem';
let age = 26;
let multilineString = `
my name is: ${name}
my age is: ${age}
`;
console.log(multilineString);compatibilité :
- Il a été introduit dans
ES6//es2015 - Il est maintenant pris en charge de manière native par tous les principaux fournisseurs de navigateurs (sauf Internet Explorer).
Vérifiez la compatibilité exacte dans les documents Mozilla ici
La méthode ES6 consiste à utiliser des littéraux de modèle:
const str = `This
is
a
multiline text`;
console.log(str);
Plus de référence ici
Ma version de la jointure basée sur le tableau pour concat chaîne:
var c = []; //c stands for content
c.Push("<div id='thisDiv' style='left:10px'></div>");
c.Push("<div onclick='showDo(\'something\');'></div>");
$(body).append(c.join('\n'));
Cela a bien fonctionné pour moi, d’autant plus que j’insère souvent des valeurs dans le code HTML construit de cette manière. Mais il a beaucoup de limites. L'indentation serait bien. Ne pas avoir à traiter avec des guillemets imbriqués serait vraiment gentil, et la grossièreté de cela me gêne.
Est-ce que le .Push () à ajouter au tableau prend beaucoup de temps? Voir cette réponse:
( Y a-t-il une raison pour laquelle les développeurs JavaScript n'utilisent pas Array.Push ()? )
Après avoir examiné ces exécutions de tests (opposées), il semble que .Push () convient parfaitement aux tableaux de chaînes de caractères qui ne vont probablement pas dépasser 100 éléments. Je l'éviterai en faveur des ajouts indexés pour les tableaux de grande taille.
S'il vous plaît, par amour de la concaténation de chaînes sur Internet, n'utilisez pas les solutions ES6 pour cela. ES6 n'est PAS supporté dans tous les domaines, un peu comme CSS3 et certains navigateurs sont lents à s'adapter au mouvement CSS3. Utilisez plain ol 'JavaScript, vos utilisateurs finaux vous en remercieront.
Exemple:
var str = "This world is neither flat nor round. "+ "Once was lost will be found";
Notez également que, lorsque vous étendez une chaîne sur plusieurs lignes en utilisant une barre oblique inversée à la fin de chaque ligne, tous les caractères supplémentaires (principalement des espaces, des tabulations et des commentaires ajoutés par erreur) après une barre oblique inversée entraînent une erreur de caractère inattendue, que j'ai mis une heure à trouver. en dehors
var string = "line1\ // comment, space or tabs here raise error
line2";
Vous pouvez utiliser += pour concaténer votre chaîne. Il semble que personne ne réponde à cela, ce qui sera lisible, et aussi très bien ... quelque chose comme ça
var hello = 'hello' +
'world' +
'blah';
peut être aussi écrit comme
var hello = 'hello';
hello += ' world';
hello += ' blah';
console.log(hello);
Vous devez utiliser l'opérateur de concaténation '+'.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<script>
var str = "This "
+ "\n<br>is "
+ "\n<br>multiline "
+ "\n<br>string.";
document.getElementById("demo").innerHTML = str;
</script>
</body>
</html>
En utilisant \n votre code source ressemblera à -
Ce Est une chaîne Multiligne Et une chaîne.
En utilisant <br> votre navigateur affichera:
Ce Est une chaîne Multiligne .
Je pense que cette solution de contournement devrait fonctionner dans IE, Chrome, Firefox, Safari, Opera -
tilisation de jQuery:
<xmp id="unique_id" style="display:none;">
Some plain text
Both type of quotes : " ' " And ' " '
JS Code : alert("Hello World");
HTML Code : <div class="some_class"></div>
</xmp>
<script>
alert($('#unique_id').html());
</script>
tilisation de Javascript pur:
<xmp id="unique_id" style="display:none;">
Some plain text
Both type of quotes : " ' " And ' " '
JS Code : alert("Hello World");
HTML Code : <div class="some_class"></div>
</xmp>
<script>
alert(document.getElementById('unique_id').innerHTML);
</script>
À votre santé!!
La règle est la suivante: lorsque vous êtes dans une chaîne, utilisez\n où vous voulez une nouvelle ligne; vous n'avez pas besoin de mettre un espace avant ou après\n, l'interpréteur de JavaScript est assez intelligent pour savoir combien de temps dure la représentation des caractères non imprimables.
Si vous utilisez uniquement Node, vous pouvez utiliser le module fs pour lire la chaîne multiligne à partir d'un fichier:
var diagram;
var fs = require('fs');
fs.readFile( __dirname + '/diagram.txt', function (err, data) {
if (err) {
throw err;
}
diagram = data.toString();
});
Je viens d'essayer la réponse anonyme et j'ai trouvé qu'il y avait un petit truc ici, ça ne marche pas s'il y a un espace après la barre oblique inverse \
La solution suivante ne fonctionne donc pas -
var x = { test:'<?xml version="1.0"?>\ <-- One space here
<?mso-application progid="Excel.Sheet"?>'
};
Mais lorsque l’espace est supprimé, cela fonctionne -
var x = { test:'<?xml version="1.0"?>\<-- No space here now
<?mso-application progid="Excel.Sheet"?>'
};
alert(x.test);
J'espère que ça aide !!