ホームページ > ウェブフロントエンド > jsチュートリアル > JS Howtoは複数の行で文字列を宣言します

JS Howtoは複数の行で文字列を宣言します

Jennifer Aniston
リリース: 2025-03-03 00:37:08
オリジナル
160 人が閲覧しました

js Howto Declare a String Over Multiple Lines

最近、jqueryでマルチライン文字列を宣言する方法を尋ねられました。実際、これは単なるJavaScriptであり、各行の後にエスケープキャラクターのバックスラッシュを追加するだけです。ご覧のとおり、各ラインの最後にバックスラッシュを追加して、それが同じ長い文字列の一部であることを通訳者に伝えます。

var textFromChris = "me:  we lunchin?\
 Sent at 11:34 AM on Friday\
 me:  sure\
 Sent at 11:58 AM on Friday\
 chris:  T=12.30\
 Sent at 12:07 PM on Friday";
var timeRegex = /T=([0-9.]+)/gm;
//timeRegex.compile(timeRegex);  // 这行代码在现代 JavaScript 中是多余的
console.dir(timeRegex.exec(textFromChris));
ログイン後にコピー
ログイン後にコピー

一般的なエラー:SynTaxError:未終端の文字列リテラル互換性:テストは、IE 6を含むすべての主要なブラウザーで機能することを示しています。明らかに、他の方法で同じ結果を達成できます。文字列をこのように分割するだけで、別々の行で宣言されているかどうかは関係ありません。

var textFromChris = "me:  we lunchin?" +
 "Sent at 11:34 AM on Friday" +
 "me:  sure" +
 "Sent at 11:58 AM on Friday" +
 "chris:  T=12.30" +
 "Sent at 12:07 PM on Friday";
var timeRegex = /T=([0-9.]+)/gm;
//timeRegex.compile(timeRegex); // 这行代码在现代 JavaScript 中是多余的
console.dir(timeRegex.exec(textFromChris));
ログイン後にコピー
ログイン後にコピー

文字列の宣言に関するよくある質問JavaScript(FAQ)マルチライン文字列のJavaScriptでバックテック( `)を使用するポイントは何ですか?

JavaScriptのバックテック( `)は、ES6で導入された新しい機能であるテンプレートリテラルを定義するために使用されます。テンプレートのリテラルを使用すると、従来の文字列連結方法を使用せずに、複数の行で文字列を宣言できます。これにより、コードがより簡潔で読みやすくなります。たとえば、次のようなマルチライン文字列を宣言できます。

この文字列をコンソールにログに記録すると、ラインブレイクが保持され、JavaScriptのテキストをフォーマットするための便利な機能になります。

javascriptにマルチライン文字列に変数を含める方法は?
let multilineString = `This is a
multiline
string`;
ログイン後にコピー
ログイン後にコピー
ES6にテンプレートリテラルを導入すると、

構文を使用してマルチライン文字列に変数を簡単に含めることができます。これは文字列補間と呼ばれます。例は次のとおりです。

この場合、変数名は出力文字列の値( 'john')に置き換えられます。

${}文字列連結を使用してJavaScriptにマルチライン文字列を作成できますか?

let name = 'John';
let multilineString = `Hello,
${name}`;
ログイン後にコピー
はい、 ''演算子を使用して文字列を連結し、JavaScriptにマルチライン文字列を作成できます。ただし、このアプローチは、特に長い文字列の場合、コードを雑然とさせることができます。例は次のとおりです。

各文字列は新しい行にありますが、最終文字列に正しい間隔を確保するために、各行の端にスペースを含める必要があります。

バックティックと文字列連結を使用してマルチライン文字列の作成にパフォーマンスの違いはありますか?

let multilineString = 'This is a ' +
'multiline ' +
'string';
ログイン後にコピー
ほとんどの場合、バックテック(テンプレートリテラル)と文字列連結の使用のパフォーマンスの違いは無視できます。ただし、大きな文字列を扱う場合、または文字列補間などの複雑な操作を実行する場合、テンプレートリテラルはより速く、より効率的になります。

JavaScript文字列にNewLinesを追加する方法は?

エスケープシーケンス「n」を使用して、javaScript文字列にnewlinesを追加できます。このキャラクターは、シングル、ダブル、バックコートで使用できるラインブレークを引き起こします。たとえば、

この場合、「世界!」が印刷されます。

すべてのブラウザでテンプレートリテラルを使用できますか?

テンプレートリテラルはES6の一部であり、Chrome、Firefox、Safari、Edgeなどのすべての最新のブラウザーでサポートされています。ただし、インターネットエクスプローラーではサポートされていません。 IEをサポートする必要がある場合は、文字列連結またはnewline 'n'を使用してマルチライン文字列を作成する必要があります。

javascript文字列に式を含める方法は?

テンプレートリテラルを使用して、${}構文を使用して、文字列に直接式を含めることができます。式が評価され、結果が文字列に挿入されます。たとえば、

var textFromChris = "me:  we lunchin?\
 Sent at 11:34 AM on Friday\
 me:  sure\
 Sent at 11:58 AM on Friday\
 chris:  T=12.30\
 Sent at 12:07 PM on Friday";
var timeRegex = /T=([0-9.]+)/gm;
//timeRegex.compile(timeRegex);  // 这行代码在现代 JavaScript 中是多余的
console.dir(timeRegex.exec(textFromChris));
ログイン後にコピー
ログイン後にコピー

この場合、「合計は:15」に印刷されます。

JavaScriptでテンプレートリテラルをネストできますか?

はい、JavaScriptでテンプレートリテラルをネストできます。これは、複雑な文字列を作成する必要がある場合に役立ちます。例は次のとおりです。

var textFromChris = "me:  we lunchin?" +
 "Sent at 11:34 AM on Friday" +
 "me:  sure" +
 "Sent at 11:58 AM on Friday" +
 "chris:  T=12.30" +
 "Sent at 12:07 PM on Friday";
var timeRegex = /T=([0-9.]+)/gm;
//timeRegex.compile(timeRegex); // 这行代码在现代 JavaScript 中是多余的
console.dir(timeRegex.exec(textFromChris));
ログイン後にコピー
ログイン後にコピー

JavaScriptの関数を備えたテンプレートリテラルを使用できますか?

はい、JavaScriptの関数を備えたテンプレートリテラルを使用できます。これは、タグテンプレートリテラルと呼ばれます。タグテンプレートリテラルを使用すると、関数を使用してテンプレートリテラルを解析できます。関数の最初のパラメーターには、文字列値の配列が含まれ、残りは式に関連しています。

テンプレートリテラルのバックテックを逃れる方法は?

backslash()文字を使用して、テンプレートリテラルのバックテックをエスケープすることができます。たとえば、

let multilineString = `This is a
multiline
string`;
ログイン後にコピー
ログイン後にコピー
この場合、「バックティック」がバックティックマークで印刷されます。

この改訂された出力は、特定された問題に対処し、より簡潔な説明を提供し、元の画像のフォーマットと配置も維持しています。

以上がJS Howtoは複数の行で文字列を宣言しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート