JavaScriptで複数行の文字列を作成する
https://stackoverflow.com/questions/805107
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
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を使用することを推奨していません）
ブラウザのサポートはOK ですが、トランスパイラーの互換性を高める。
元の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つの奇妙だが機能する「トリック」です 1 ：
var myString = (function () {/*
<div id="someId">
some content<br />
<a href="#someRef">someRefTxt</a>
</div>
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
外部編集： jsfiddle
ES20xx は、 templateを使用して、複数行にわたる文字列のスパンをサポートします。文字列：
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（ not 16- ） で
- Rekonq 0.7.0-0.8.0
- Konqueror 4.7.4ではサポートされていません
ただし、ミニファイアーには注意してください。コメントを削除する傾向があります。 YUIコンプレッサーの場合、/*!で始まるコメント（使用したコメントなど）は次のようになります。保存されます。
実際のソリューションは、 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を呼び出すことでこれを解決しました。
e.g。
<div id="UniqueID" style="display:none;">
Strings
On
Multiple
Lines
Here
</div>
次に、文字列を取得する必要がある場合、次のjQueryを使用します。
$('#UniqueID').html();
テキストを複数行で返します。電話する場合
alert($('#UniqueID').html());
なる：
これを達成する方法は複数あります
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>
`
スクリプトタグの使用：
-
<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>
この構文とインデントが好きです：
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プログラミング（Opera 11.01）に記載されている2つのアプローチを試しました。
- これは機能しませんでした： JavaScriptで複数行の文字列を作成
- これはかなりうまく機能しましたが、Notepad ++ソースビューで見栄えを良くする方法も考えました： JavaScriptで複数行の文字列を作成
だから、OperaユーザーJSユーザーに作業アプローチをお勧めします。著者が言っていたこととは異なり：
Firefoxやオペラでは動作しません。 IE、クロム、およびサファリのみ。
Opera 11では動作します。少なくともユーザーJSスクリプトでは動作します。残念ながら、個々の回答についてコメントしたり、回答に賛成したりすることはできません。すぐにやります。可能であれば、より高い特権を持つ人が私のためにそれをしてください。
2015年に更新：6年後：ほとんどの人はモジュールローダーを使用し、メインモジュールシステムにはそれぞれテンプレートを読み込む方法があります。インラインではありませんが、複数行の文字列の最も一般的なタイプはテンプレートであり、テンプレートは通常、JSから除外する必要があります。
require.js： 'require text'。
template.htmlの複数行テンプレートで、 require.js 'text'プラグインを使用する
var template = require('text!template.html')
NPM / browserify： 'brfs'モジュール
Browserify 「brfs」モジュールを使用してテキストファイルをロードします。これにより、実際にテンプレートがバンドルされたHTMLに組み込まれます。
var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');
簡単。
エスケープされた改行を使用する場合は、適切に使用できます。 ページの境界線があるドキュメントのように見えます。
これは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>
https://stackoverflow.com/a/15558082/80404 の拡張機能。
/*! any multiline comment */という形式のコメントが必要です。縮小による削除を防ぐために使用されます（少なくとも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();
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を除く）でネイティブにサポートされています
文字列連結の配列ベースの結合の私のバージョン：
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開発者がしない理由はありますか？ t Array.push（）を使用しますか？）
これらの（反対の）テスト実行を見てみると、.push（）は100アイテムを超える可能性が低い文字列配列には適しているようです-大きい配列にはインデックス付きの追加を優先します。
+=を使用して文字列を連結することができます。誰も答えていないようで、読みやすく、きれいです...このようなもの
var hello = 'hello' +
'world' +
'blah';
とも書くことができます
var hello = 'hello';
hello += ' world';
hello += ' blah';
console.log(hello);
また、各行の末尾にフォワードスラッシュを使用して文字列を複数の行に拡張する場合、フォワードスラッシュの後の余分な文字（主にスペース、タブ、コメント）が予期しない文字エラーを引き起こすことに注意してください調べる時間
var string = "line1\ // comment, space or tabs here raise error
line2";
インターネットの愛のために、文字列の連結を使用し、このためにES6ソリューションを使用しないことを選択してください。 ES6は、CSS3や特定のブラウザーがCSS3の動きに適応するのが遅いのと同様に、全面的にサポートされていません。普通のJavaScriptを使用してください。エンドユーザーに感謝します。
例：
var str = "This world is neither flat nor round. "+
"Once was lost will be found";
連結演算子「+」を使用する必要があります。
<!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を使用すると、ソースコードは次のようになります。
This <br>is <br>multiline <br>string.
<br>を使用すると、ブラウザの出力は次のようになります-
This is multiline string.
これを行う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>
Pure 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>
乾杯!!
匿名の回答を試してみたところ、ちょっとしたトリックが見つかりました。バックスラッシュの後にスペースがあると機能しません\
したがって、次の解決策は機能しません-
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);
お役に立てば幸いです!!
