javascript_javascript スキルで複数行の文字列を作成する 7 つの方法

JS には複数行の文字列の標準的な表現方法はありませんが、テンプレートを使用する場合、テンプレートの可読性を確保するために必然的に複数行の文字列を使用するため、さまざまな方法が登場しています。簡単に要約して比較するための例として、jade テンプレートを使用します。

1. 文字列の追加

これは、次のような最も簡単で最も一般的に使用される形式です

コードをコピーします コードは次のとおりです:

var tmpl =''
'!!! 5'
'html'
' include header'
' body'
' //IE 6 の場合'
' ' .alert.alert-error'
' center 申し訳ありませんが、IE6 はサポートされていません。ブラウザをアップグレードしてください'
' ' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8 公式ダウンロード'
' a(href="https:// www .google.com/intl/en/chrome/browser/") | Chrome ダウンロード'
' インクルードヘッド'
' .container'
' .row-fluid'
' .span8'
' ブロックメイン'
' ページャーバーを含む'
' .span4'
' サイドバーを含む' ' フッターを含む'
' スクリプトを含む'

利点:

理解しやすく、シンプルで、信頼性が高い

単一の文字列に js ロジックを追加できる柔軟性

欠点:

は、本当の意味での複数行の文字列ではありません。実際に複数行にしたい場合は、n

を追加する必要があります。多くの数字は、' と " が多く、醜いです。 >

2. バックスラッシュを使用します

これは行継続文字と呼ばれますが、一度使用すると非常に中毒性の高い文字です。 >

コードをコピーします コードは次のとおりです:var tmpl ='

!!!

html
include header
body
//IE 6 の場合
.alert.alert-error
center 申し訳ありませんが、IE6 はサポートされていません。ブラウザをアップグレードしてください
A (href = "http://windows.microsoft.com/zh-in/internet-emplorer/download-d-d-di") | IE8 公式ダウンロード
(href = "https://www.google.com /intl/ja/chrome/browser/") | Chrome ダウンロード
include head
.container
.row-fluid
.span8
block main
include pagerbar
。スパン4
サイドバーを含む
フッターを含む
スクリプトを含む


利点:

シンプル、各行にあと 1 つだけ必要です
効率的です!この方法は、ほとんどのブラウザで最も高速です。

欠点:

致命的な欠陥。各行にスペースを含めてはなりません。そうしないと、直接のスクリプト エラーが発生します。
は実際の複数行の文字列ではありません。実際の複数行の文字列が必要な場合は、n
を自分で追加する必要があります。 js エンジンはこれをサポートしていますが、ECMAScript

の一部ではありません。

3. 文字列配列結合

コードをコピー コードは次のとおりです。

var tmpl = [
'! !! 5 ' ,
'html' ,
' インクルードヘッダー' ,
' 本体' ,
' //IE 6 の場合' ,
' .alert.alert-error' ,
' center 申し訳ありませんが、IE6 はサポートされていません。ブラウザをアップグレードしてください' ,
' center a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download- ie") | IE8 公式ダウンロード' ,
' include head' ,
' .container' ,
' .row-fluid' ,
' .span8' ,
' block main' ,
' ページャーバーを含む' ,
' .span4' ,
' サイドバーを含む' ,
' フッターを含む' ,
' スクリプトを含む'].join('n');

利点:
実際の複数行の文字列

理解しやすく、シンプルで信頼性が高い
単一の文字列に js ロジックを追加できる柔軟性があります

欠点:

たくさんの数字と「、」、醜い

5. String.prototype.concat

コードをコピーします コードは次のとおりです:

var tmpl = String.prototype.concat.call(
'!!! 5' ,
'html' ,
' インクルードヘッダー' ,
' body' ,
' //IE 6 の場合' ,
' .alert.alert-error' ,
center 申し訳ありませんが、IE6 はサポートされていません。ブラウザをアップグレードしてください' ,
' a( href ="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8 公式ダウンロード' ,
' a(href="https://www.google. com/ intl/en/chrome/browser/") | Chrome ダウンロード' 、
' インクルード ヘッド' 、
' .container' 、
' .row-fluid' 、
' .span8' ,
' ブロックメイン' ,
' ページャーバーを含む' ,
' .span4' ,
' サイドバーを含む' ,
' フッターを含む' ,
' スクリプトを含む');


利点:

一般的には使用されません。実際、文字列の concat メソッドはあまり一般的ではありません
理解しやすく、シンプルで信頼性があります
単一の文字列に js ロジックを追加できる柔軟性があります

欠点:

実際には複数行の文字列ではありません
「,」," がたくさんあり、醜いです

5. ヒアドキュメント

これは、関数

コードをコピーします コードは次のとおりです:

関数 heredoc(fn) {
return fn.toString().split('n').slice(1,-1).join('n') 'n'
}

var tmpl = heredoc(function(){/*
!!! 5
html
include header
body
//IE 6 の場合
.alert.alert-エラー
IE8 公式ダウンロード
a(href="https://www.google.com/intl /en/chrome/browser/") | Chrome ダウンロード
include head
.container
.row-fluid
.span8
サイドバーを含める
フッターを含める
スクリプトを含める
*/});


利点:

テンプレート文字列に余分な文字を記述する必要はなく、クリーンでシンプルです真の複数行文字列。 ああ

欠点:

単一の文字列に js ロジックを追加することはできません。

コンプレッサーによって圧縮されやすいため、uglifyjs と gcc は、オプションを使用して圧縮を回避することもできます。これは大きな問題ではありません

6. コーヒースクリプト

これは言語を変更するのと同じであり、コンパイル ターゲットとして js を使用する Coffeescript のような言語を通じて、この言語に欠けている関数を実装することは素晴らしい選択です。

コードをコピー

コードは次のとおりです:

var tmpl = """
!!! 5
html
include header
body
//IF IE 6
.alert.alert-error 申し訳ありませんが、IE6 はサポートされていません。ブラウザをアップグレードしてください
a (href = "http://windows.microsoft.com/zh-cn/internet-download-down ダウンロード
a (href="https://www.google.com/intl/en/chrome/browser/") | Chrome ダウンロード
include head
.container
.row-fluid
.span8
サイドバーを含める
フッターを含める
スクリプトを含める
"""

利点:

分かりやすく、シンプルで信頼性があります

欠点:

coffeescript について知る必要があります

ファイル全体を Coffeescript で記述する必要があります

7. ES6

ES6 には、Chrome Canary Experimental で複数行の文字列が初めて実装されました。 JavaScript はこの機能を使用でき、typescript もこのメソッドをサポートします


コードをコピー

コードは次のとおりです:var tmpl = `!!! 5

html

include header
body
//if IE 6
.alert.alert-error
センター、IE6 はサポートされていません。ブラウザをアップグレードしてください
a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8 公式ダウンロード
a (href="https://www.google.com/intl/en/chrome/browser/") | Chrome ダウンロード
include head
.container
.row-fluid
.span8
ブロックメイン
ページャーバーを含む
.span4
サイドバーを含む
フッターを含む
スクリプトを含む`

利点:

理解しやすいネイティブサポート

真の複数行文字列
欠点:

JS エンジンのサポートが限定的

8. まとめ

これらの書き方を見て、どのように選択しますか? Coffeescript を使用している場合、クライアント上でコンプレッサーでコメントを削除する問題が解決されている場合は、サポートされている複数行の文字列記述方法を自由に使用してください。解決できない場合は、ヒアドキュメントを使用することをお勧めします。コンプレッサーの問題 質問です。接続にはバックスラッシュを使用します。各行に 1 文字を追加するだけです。