JavaScriptで複数行の文字列を作成する
Rubyには以下のコードがあります。このコードをJavaScriptに変換したいです。 JSの同等のコードは何ですか？
text = <<"HERE"
This
Is
A
Multiline
String
HERE
更新：
ECMAScript 6（ES6）では、新しいタイプのリテラル、つまり テンプレートリテラル が導入されています。それらには多くの機能、とりわけ可変補間がありますが、この質問にとって最も重要なことは、それらは複数行になることができるということです。
テンプレートリテラルはbackticksで区切られています。
var html = `
<div>
<span>Some HTML here</span>
</div>
`;
（注：私は文字列でHTMLを使用することを提唱していません）
ブラウザのサポートは問題ありません 、しかし transpilers を使えばもっと互換性があります。
元のES5の答え：
Javascriptにはヒアドキュメント形式の構文はありません。しかし、文字通りの改行から逃れることができます。
"foo \
bar"
ES6アップデート：
最初の答えが述べているように、ES6/Babelでは、バッククォートを使うだけで複数行の文字列を作成することができます。
const htmlString = `Say hello to
multi-line
strings!`;
変数の内挿は、バックティックで区切られた文字列が付属する一般的な新機能です。
const htmlString = `${user.name} liked your post about strings`;
これは単に連結に変換されます。
user.name + ' liked your post about strings'
元のES5の答え：
GoogleのJavaScriptスタイルガイド 改行をエスケープする代わりに文字列連結を使用することをお勧めします。
これをしないでください：
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.';各行の先頭の空白は、コンパイル時に安全に削除することはできません。スラッシュの後の空白はトリッキーなエラーになります。ほとんどのスクリプトエンジンがこれをサポートしていますが、ECMAScriptの一部ではありません。
代わりに文字列連結を使用します。
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.';
パターンtext = <<"HERE" This Is A Multiline String HEREは、jsでは利用できません（私の古き良きPerlの頃によく使われていたことを覚えています）。
複雑な、または長い複数行の文字列について見落とさないようにするために、配列パターンを使用することがあります。
var myString =
['<div id="someId">',
'some content<br />',
'<a href="#someRef">someRefTxt</a>',
'</div>'
].join('\n');
あるいは、anonymousというパターンがすでに表示されています（改行をエスケープ）。これは、コード内で見にくいブロックになる可能性があります。
var myString =
'<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';
これはもう一つの奇妙だがうまくいく「トリック」です1：
var myString = (function () {/*
<div id="someId">
some content<br />
<a href="#someRef">someRefTxt</a>
</div>
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
外部編集： jsfiddle
ES20xx は テンプレート文字列を使用して複数行にわたる文字列のスパンをサポートします ：
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 注：コードを縮小/難読化すると、これは失われます。
あなたは純粋なJavaScriptで複数行の文字列を使用できます。
このメソッドは、関数のシリアル化に基づいています。これは、 実装に依存するように定義されている です。ほとんどのブラウザで動作しますが（以下を参照）、今後も動作するという保証はないため、それに依存しないでください。
次の機能を使用します。
function hereDoc(f) {
return f.toString().
replace(/^[^\/]+\/\*!?/, '').
replace(/\*\/[^\/]+$/, '');
}
次のようなヒアドキュメントを作成できます。
var tennysonQuote = hereDoc(function() {/*!
Theirs not to make reply,
Theirs not to reason why,
Theirs but to do and die
*/});
このメソッドは、以下のブラウザーで正常にテストされています（言及されていない=テストされていません）：
- IE 4-10
- Opera 9.50-12（9-にはない）
- Safari 4〜6（3ではない）
- Chrome 1〜45
- Firefox 17〜21（ 16-にはない ）
- Rekonq 0.7.0-0.8.0
- Konqueror 4.7.4ではサポートされていません
ただし、ミニファイナーには注意してください。コメントを削除する傾向があります。 YUIコンプレッサー の場合、/*!（使用したコメントなど）で始まるコメントが保持されます。
real解決策は CoffeeScript を使用することだと思います。
あなたはこれを行うことができます...
var string = 'This is\n' +
'a multiline\n' +
'string';
私はこの非常にジミーな装備の複数列ストリングの方法を思いつきました。関数を文字列に変換すると、関数内のコメントも返されるので、複数行コメント/ ** /を使用して、そのコメントを文字列として使用できます。あなたはただ端を切り落とさなければなりません、そしてあなたはあなたの弦を持っています。
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)
私はこれを見たことがないのに驚いています。テンプレート：
<script type="bogus" id="multi">
My
multiline
string
</script>
<script>
alert($('#multi').html());
</script>
HTMLがあるがそれがうまくいかない環境について誰かが知っていますか？
Divを出力して非表示にし、必要なときにjQueryでdiv idを呼び出すことでこれを解決しました。
例えば.
<div id="UniqueID" style="display:none;">
Strings
On
Multiple
Lines
Here
</div>
それから文字列を取得する必要があるときは、次のjQueryを使用します。
$('#UniqueID').html();
これは私のテキストを複数行で返します。電話したら
alert($('#UniqueID').html());
私は得ます：
スクリプトタグを使用する：
- マルチテキストを含む
<script>...</script>ブロックをheadタグに追加します。 そのまま複数行のテキストを取得します...（テキストエンコーディングには注意してください：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>
これを達成するには複数の方法があります
1.スラッシュ連結
var MultiLine= '1\
2\
3\
4\
5\
6\
7\
8\
9';
2.通常の連結
var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';
3.配列結合の連結
var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');
パフォーマンス面では、 スラッシュ連結 （最初のもの）が最速です。
参照 このテストケース パフォーマンスに関する詳細は/
更新：
ES2015 を使用すると、テンプレート文字列機能を利用できます。それがあれば、複数行の文字列を作成するためにバックティックを使用するだけです。
例：
`<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`
私はこの構文とインデントが好きです。
string = 'my long string...\n'
+ 'continue here\n'
+ 'and here.';
（しかし、実際には複数行の文字列と見なすことはできません）
それを美しくするこのライブラリがあります：
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>
*/});
Downvoters ：このコードは情報提供のみを目的として提供されています。
これはMac上のFx 19とChrome 24でテストされています
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'));
要約すると、私はここにユーザのJavaScriptプログラミング（オペラ11.01）に記載されている2つのアプローチを試みました：
- これはうまくいきませんでした： JavaScriptで複数行の文字列を作成する
- これはかなりうまくいきました、私はそれをNotepad ++ソースビューで見栄えよくする方法を考え出しました： JavaScriptで複数行の文字列を作成する
だから私はOperaユーザーのJSユーザーのための実用的なアプローチをお勧めします。作者が言っていたものとは異なります。
Firefoxやオペラでは動作しません。 IE、クロム、サファリのみ。
Opera 11では動作します。少なくともユーザのJSスクリプトでは動作します。残念ながら、私は個々の答えについてコメントしたり答えを支持したりすることができません、私はすぐにそれをしたいと思います。可能であれば、より高い特権を持つ人が私のためにそれをやってください。
エスケープされた改行を使用したい場合は、 きれいに を使用できます。 ページ境界のある文書のように見えます 。
2015年のために更新された：今から6年後のことです。ほとんどの人がモジュールローダーを使い、メインモジュールシステムはそれぞれテンプレートをロードする方法を持っています。インラインではありませんが、最も一般的なタイプのマルチライン文字列はテンプレートとテンプレートは一般にJSから除外されますです。
require.js：「テキストが必要」。
require.jsの 'text'プラグインを使用 、template.htmlの複数行テンプレート
var template = require('text!template.html')
NPM/browserify： 'brfs'モジュール
Browserify 'brfs'モジュールを使用して テキストファイルをロードします。これは実際にあなたのバンドルされたHTMLにあなたのテンプレートを構築するでしょう。
var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');
簡単です。
への私の拡張 - https://stackoverflow.com/a/15558082/80404 。これは/*! any multiline comment */ where symbolの形式でコメントを期待します。縮小による削除を防ぐために使用されます（少なくとも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));
};
例：
var tmpl = function() { /*!
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
*/}.extractComment();
これは、IE、Safari、Chrome、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>
TypeScript （JavaScript SuperSet）を使用できます。複数行の文字列をサポートし、オーバーヘッドなしで純粋なJavaScriptに変換し直します。
var templates = {
myString: `this is
a multiline
string`
}
alert(templates.myString);
普通のJavaScriptで同じことをしたいのなら：
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)
IPad/Safariは'functionName.toString()'をサポートしていないことに注意してください。
多くのレガシーコードがある場合は、TypeScriptで単純なJavaScriptのバリアントを使用することもできます（クリーンアップの目的で）。
interface externTemplates
{
myString:string;
}
declare var templates:externTemplates;
alert(templates.myString)
そして、あなたはテンプレートを別のファイルに入れる単純なJavaScriptの変種からのマルチラインストリングオブジェクトを使うことができます（あなたはそれをバンドルにマージすることができます）。
あなたはTypeScriptを試すことができます
http://www.typescriptlang.org/Playground
ES6では、バックティックを使用して複数行の文字列を指定できます。これはテンプレートリテラルと呼ばれています。このような：
var multilineString = `One line of text
second line of text
third line of text
fourth line of text`;
バックティックの使用はNodeJSで機能し、Chrome、Firefox、Edge、Safari、およびOperaでサポートされています。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Javascripsで複数行の文字列を作成する最も簡単な方法は、バッククォート（ ``）を使用することです。これにより、${variableName}を使用して変数を挿入できる複数行の文字列を作成できます。
例：
let name = 'Willem';
let age = 26;
let multilineString = `
my name is: ${name}
my age is: ${age}
`;
console.log(multilineString);互換性：
ES6//es2015で紹介されました- 現在、すべての主要なブラウザベンダによってネイティブにサポートされています（Internet Explorerを除く）。
文字列concatの配列ベースの結合の私のバージョン：
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'));
特にこのようにして構築されたhtmlに値を挿入することが多いので、これは私にとってはうまくいきました。しかし、それには多くの制限があります。字下げはいいでしょう。ネストされた引用符を扱わなくてもいいのは本当にいいことですし、その大きさのせいで私は気になります。
配列に追加する.Push（）は時間がかかりますか？この関連回答を参照してください。
（ JavaScript開発者がArray.Push（）を使用しない理由はありますか？ ）
これらの（反対の）テスト実行を見た後、.Push（）は100項目を超えることはないと思われる文字列配列に適しています - 私はそれを避けて、より大きな配列のインデックス付き追加を支持します。
インターネットの愛のために文字列の連結を使用し、このためにES6ソリューションを使用しないことを選択してください。 ES6は全面的にサポートされているわけではなく、CSS 3や特定のブラウザがCSS 3の動きに適応するのが遅いようなものです。一般的なJavaScriptを使用してください。あなたのエンドユーザはあなたに感謝します。
例：
var str = "This world is neither flat nor round. "+ "Once was lost will be found";
また、各行の終わりにフォワードバックスラッシュを使用して複数行に渡って文字列を拡張すると、フォワードバックスラッシュの後に余分な文字（大抵スペース、タブ、コメントが誤って追加された）でる
var string = "line1\ // comment, space or tabs here raise error
line2";
あなたは+=を使ってあなたの文字列を連結することができます。
var hello = 'hello' +
'world' +
'blah';
次のように書くこともできます。
var hello = 'hello';
hello += ' world';
hello += ' blah';
console.log(hello);
連結演算子 '+'を使用する必要があります。
<!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>
\nを使うことであなたのソースコードは次のようになるでしょう -
この <br>は、 <br>複数行の <br>文字列です。
<br>を使用すると、ブラウザの出力は次のようになります -
この は、 複数行の 文字列です。
これを行うためのES6の方法は、テンプレートリテラルを使用することです。
const str = `This
is
a
multiline text`;
console.log(str);
もっと見る ここ
この回避策は、IE、Chrome、Firefox、Safari、Operaで機能するはずです。
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>
純粋なJavascriptを使用する：
<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>
乾杯！！
ルールは次のとおりです。文字列内では、改行する場所に\ nを使用します。\nの前後にスペースを入れる必要はありません。JavaScriptのインタープリターは、印刷できない文字表現の長さを知るのに十分賢いです。
たまたまNodeだけで実行しているのなら、ファイルから複数行の文字列を読み込むためにfsモジュールを使うことができます。
var diagram;
var fs = require('fs');
fs.readFile( __dirname + '/diagram.txt', function (err, data) {
if (err) {
throw err;
}
diagram = data.toString();
});
匿名の答えを試してみて、ここにちょっとしたトリックがあるのを見つけました、バックスラッシュ\の後にスペースがあればそれはうまくいきません
だから、次の解決策はうまくいきません -
var x = { test:'<?xml version="1.0"?>\ <-- One space here
<?mso-application progid="Excel.Sheet"?>'
};
しかしスペースが削除されるときそれははたらきます -
var x = { test:'<?xml version="1.0"?>\<-- No space here now
<?mso-application progid="Excel.Sheet"?>'
};
alert(x.test);
それが役に立てば幸い ！！