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
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
Réponses:
ECMAScript 6 (ES6) introduit un nouveau type de littéral, à savoir les littéraux de modèle . Ils ont de nombreuses fonctionnalités, interpolation variable entre autres, mais surtout pour cette question, ils peuvent être multilignes.
Un littéral de modèle est délimité par des backticks :
var html = `
<div>
<span>Some HTML here</span>
</div>
`;
(Remarque: je ne préconise pas d'utiliser HTML dans les chaînes)
Le support du navigateur est OK , mais vous pouvez utiliser des transpilers pour être plus compatible.
Javascript n'a pas de syntaxe ici-document. Vous pouvez cependant échapper à la nouvelle ligne littérale qui se rapproche:
"foo \
bar"
Comme le mentionne la première réponse, avec ES6 / Babel, vous pouvez maintenant créer des chaînes multilignes simplement en utilisant des raccourcis:
const htmlString = `Say hello to
multi-line
strings!`;
L'interpolation des variables est une nouvelle fonctionnalité populaire qui vient avec des chaînes délimitées par des graduations:
const htmlString = `${user.name} liked your post about strings`;
Cela se traduit simplement par concaténation:
user.name + ' liked your post about strings'
Le guide de style JavaScript de Google recommande d'utiliser la concaténation de chaînes au lieu d'échapper aux sauts de ligne:
Ne faites pas cela:
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.';
L'espace au début de chaque ligne ne peut pas être supprimé en toute sécurité au moment de la compilation; un espace après la barre oblique entraînera des erreurs délicates; et bien que la plupart des moteurs de script le prennent en charge, il 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.';
\
au lieu de `\` c'est difficile à remarquer] et (3) alors que la plupart des moteurs de script le supportent, il ne fait pas partie d'ECMAScript [c'est-à-dire pourquoi utiliser des fonctionnalités non standard?] Rappelez-vous que c'est un guide de style, qui consiste à rendre le code facile à lire + à maintenir + à déboguer: pas seulement "ça marche" correct.
le motif text = <<"HERE" This Is A Multiline String HERE
n'est pas disponible en js (je me souviens de l'avoir beaucoup utilisé pendant mes bons vieux jours Perl).
Pour garder la surveillance avec des 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é (escape newline), qui peut être un vilain bloc dans votre code:
var myString =
'<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';
Voici un autre "truc" 1 étrange mais qui fonctionne : 1
var myString = (function () {/*
<div id="someId">
some content<br />
<a href="#someRef">someRefTxt</a>
</div>
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
édition externe: jsfiddle
ES20xx prend en charge les chaînes s'étendant 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: cela sera perdu après avoir réduit / obscurci votre code
Vous pouvez avoir des chaînes multilignes en JavaScript pur.
Cette méthode est basée sur la sérialisation des fonctions, qui est définie comme dépendante de l'implémentation . Il fonctionne dans la plupart des navigateurs (voir ci-dessous), mais il n'y a aucune garantie qu'il fonctionnera toujours à l'avenir, alors ne vous y fiez pas.
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és = non testés):
Soyez prudent avec votre minificateur, 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 vraie solution serait d'utiliser CoffeeScript .
MISE À JOUR ES6: Vous pouvez utiliser le backtick au lieu de créer une fonction avec un commentaire et d'exécuter toString sur le commentaire. Le regex devrait être mis à jour pour ne supprimer que les espaces. Vous pouvez également avoir une méthode de prototype de chaîne pour ce faire:
let foo = `
bar loves cake
baz loves beer
beer loves people
`.removeIndentation()
Ce serait cool. Quelqu'un devrait écrire cette méthode de chaîne .removeIndentation ...;)
Tu peux le faire...
var string = 'This is\n' +
'a multiline\n' +
'string';
Je suis venu avec cette méthode truquée très jimmy d'une chaîne multi doublée. Étant donné que la conversion d'une fonction en chaîne renvoie également tous les commentaires à l'intérieur de la fonction, vous pouvez utiliser les commentaires comme chaîne en utilisant un commentaire multiligne / ** /. Il vous suffit de 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)
toString()
.
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 pour les modèles:
<script type="bogus" id="multi">
My
multiline
string
</script>
<script>
alert($('#multi').html());
</script>
Quelqu'un connaît-il un environnement où il y a du HTML mais cela ne fonctionne pas?
J'ai résolu ce problème en générant un div, en le rendant caché et en appelant l'ID de 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 renvoie mon texte sur plusieurs lignes. Si j'appelle
alert($('#UniqueID').html());
Je reçois:
display:none
contenu, probablement en raison de la popularité des frontaux de style JavaScript. (Par exemple, une page de FAQ avec des fonctionnalités de masquage / affichage.) Vous devez cependant être prudent, car Google dit qu'ils peuvent vous punir si le contenu masqué semble être conçu pour gonfler artificiellement votre classement SEO.
Il existe plusieurs façons d'y parvenir
1. Concaténation de 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. Array Join concatenation
var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');
Côté performances, la concaténation Slash (première) est la plus rapide.
Reportez - vous à ce cas de test pour plus de détails concernant les performances
Mise à jour:
Avec l' ES2015 , nous pouvons profiter de sa fonction de chaînes de modèles. Avec cela, nous avons juste besoin d'utiliser des back-ticks pour créer des chaînes multi-lignes
Exemple:
`<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`
Utilisation de balises de script:
<script>...</script>
bloc contenant votre texte multiligne dans la head
balise;obtenez votre texte multiligne tel quel ... (attention au codage du 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>
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
Je ne me souviens pas avoir eu d'autres problèmes que de mal saisir les commentaires dans JS. Des espaces où aucun problème.
J'aime cette syntaxe et cette indentation:
string = 'my long string...\n'
+ 'continue here\n'
+ 'and here.';
(mais ne peut pas être considéré comme une chaîne multiligne)
Il y a cette bibliothèque qui la rend belle:
https://github.com/sindresorhus/multiline
var str = '' +
'<!doctype html>' +
'<html>' +
' <body>' +
' <h1>❤ unicorns</h1>' +
' </body>' +
'</html>' +
'';
var str = multiline(function(){/*
<!doctype html>
<html>
<body>
<h1>❤ unicorns</h1>
</body>
</html>
*/});
nodejs
, en utilisant dans le navigateur doit être attentif.
Function.prototype.String()
.
Downvoters : Ce code est fourni à titre d'information uniquement.
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> ago
</li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag
new_comment=document.currentScript.innerHTML.split("EOF")[1];
document.querySelector("ul").innerHTML=new_comment.replace('$text','This is a dynamically created text');
<ul></ul>
pour résumer, j'ai essayé 2 approches listées ici dans la programmation javascript de l'utilisateur (Opera 11.01):
Je recommande donc l'approche de travail pour les utilisateurs JS d'Opera. Contrairement à ce que l'auteur disait:
Cela ne fonctionne pas sur firefox ou opéra; uniquement sur IE, chrome et safari.
Il fonctionne dans Opera 11. Au moins dans les scripts JS utilisateur. Dommage que je ne puisse pas commenter les réponses individuelles ou voter la réponse, je le ferais immédiatement. Si possible, quelqu'un avec des privilèges plus élevés, faites-le pour moi.
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();
Mise à jour pour 2015 : c'est six ans plus tard maintenant: la plupart des gens utilisent un chargeur de module, et les systèmes de modules principaux ont chacun des moyens de charger des modèles. Ce n'est pas en ligne, mais le type de chaîne multiligne le plus courant est les modèles, et les modèles doivent généralement être gardés hors de JS de toute façon .
Utilisation du plugin 'text' require.js , avec un modèle multiligne dans template.html
var template = require('text!template.html')
Browserify utilise un module «brfs» pour charger les fichiers texte. Cela créera en fait votre modèle dans votre code HTML groupé.
var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');
Facile.
Si vous êtes prêt à utiliser les sauts de ligne échappés, ils peuvent être bien utilisés . Il ressemble à un document avec une bordure de page .
L'équivalent en javascript est:
var text = `
This
Is
A
Multiline
String
`;
Voici la spécification . Voir le support du navigateur au bas de cette page . Voici également quelques exemples .
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 les transpile 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 chaîne multiligne 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 sur
http://www.typescriptlang.org/Playground
La manière ES6 de le faire serait d'utiliser des littéraux de modèle:
const str = `This
is
a
multiline text`;
console.log(str);
Plus de référence ici
ES6 vous permet d'utiliser un backtick pour spécifier une chaîne sur plusieurs lignes. Cela s'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 est d'utiliser des astuces (``). Cela vous permet de créer des chaînes multilignes dans lesquelles vous pouvez insérer des variables avec ${variableName}
.
let name = 'Willem';
let age = 26;
let multilineString = `
my name is: ${name}
my age is: ${age}
`;
console.log(multilineString);
ES6
//es2015
Vérifiez la compatibilité exacte dans les documents Mozilla ici
Ma version de jointure basée sur un tableau pour la concaténation de chaînes:
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 html construit de cette façon. Mais il a beaucoup de limites. Le retrait serait bien. Ne pas avoir à traiter avec des guillemets imbriqués serait vraiment bien, et juste l'encombrement me dérange.
Le .push () à ajouter au tableau prend-il beaucoup de temps? Voir cette réponse connexe:
( Y a - t-il une raison pour laquelle les développeurs JavaScript n'utilisent pas Array.push ()? )
Après avoir regardé ces tests (opposés), il semble que .push () soit bien pour les tableaux de chaînes qui ne dépasseront probablement pas plus de 100 éléments - je l'éviterai en faveur des ajouts indexés pour les tableaux plus grands.
Vous pouvez utiliser +=
pour concaténer votre chaîne, il semble que personne n'a répondu à cela, ce qui sera lisible, et aussi soigné ... quelque chose comme ça
var hello = 'hello' +
'world' +
'blah';
peut aussi s'écrire
var hello = 'hello';
hello += ' world';
hello += ' blah';
console.log(hello);
Notez également que, lors de l'extension de la chaîne sur plusieurs lignes à l'aide d'une barre oblique inverse à la fin de chaque ligne, tout caractère supplémentaire (principalement des espaces, des tabulations et des commentaires ajoutés par erreur) après la barre oblique inverse provoquera 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";
Pour l'amour d'Internet, utilisez la concaténation de chaînes et choisissez de ne pas utiliser les solutions ES6 pour cela. ES6 n'est PAS pris en charge dans tous les domaines, tout comme CSS3 et certains navigateurs étant lents à s'adapter au mouvement CSS3. Utilisez JavaScript tout simplement, vos utilisateurs finaux vous remercieront.
Exemple:
var str = "This world is neither flat nor round. "+
"Once was lost will be found";
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 à -
Cette <br> c'est <br> multiligne <br> chaîne.
En utilisant <br>
la sortie de votre navigateur, vous aurez l'impression -
Cette est multiligne chaîne.
Je pense que cette solution devrait fonctionner dans IE, Chrome, Firefox, Safari, Opera -
Utilisation 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>
Utilisation 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é!!
<xmp>
est tellement obsolète. Il peut être autorisé en HTML, mais ne doit être utilisé par aucun auteur. Voir stackoverflow.com/questions/8307846/…
<pre>;
avec des échappements n'aidera pas ma solution .. J'ai rencontré un problème similaire aujourd'hui et j'essaie de trouver une solution .. mais dans mon cas, j'ai trouvé un moyen très n00bish de résoudre ce problème en mettre la sortie dans des commentaires html au lieu de <xmp> ou de toute autre balise. lol. Je sais que ce n'est pas une façon standard de le faire, mais je travaillerai sur cette question plus demain matin .. A bientôt !!
style="display:none"
Chrome, il essaie de charger les <img>
images mentionnées dans l'exemple de bloc.
Je viens d'essayer la réponse anonyme et j'ai trouvé qu'il y avait une petite astuce ici, cela ne fonctionne 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 cela aide !!