JavaScript 文字列形式: メソッドと例

JavaScript 文字列形式とは何ですか?

JavaScript 文字列形式は、定義された形式で文字列を操作および書式設定するために使用できるアプローチを指します。 これは、アプリケーションに表示されるテキストを制御できるようにする、あらゆるプログラミング言語の重要な機能です。

JavaScript コードでは、文字列の書式設定により com が変換される可能性がありますplex シンプルな方法でデータを取得します。 また、出力の読みやすさも向上し、コードの保守性も向上します。 さらに、適切にフォーマットされた JavaScript 文字列も、アプリケーションのユーザー エクスペリエンスを向上させる役割を果たすことができます。

JavaScript で文字列をフォーマットするにはどうすればよいですか?

JavaScript で文字列をフォーマットするには、以下の手順に従います。

ステップ1) まず、文字列に含めるデータを決定する必要があります。

ステップ2) 次に、JS で文字列をフォーマットする方法を選択します。

ステップ3) それに応じて実装用のコードを記述します。

ステップ4) コードをテストして、期待どおりの出力が生成されることを確認します。

ステップ5) 追加の書式設定のニーズや要件を満たすようにコードを更新または変更します。

ステップ6) 保守性と読みやすさのためにコードをリファクタリングします。

JavaScript のさまざまな文字列フォーマット方法

JavaScript で文字列をフォーマットするには、連結などの方法が複数あります。 operators、テンプレート リテラル、正規表現など。

次のセクションでは、次のことを検討します。wing アプローチ:

  • {} Brackets バッククォート付き
  • "+" Operaタ
  • カスタム関数の文字列の書式設定
  • 連結 operaタ
  • テンプレートリテラル
  • 正規表現
  • カスタム機能
  • ターナリー operaタ

方法 1: {} を使用する Brackets バックティックを使用して JavaScript で文字列をフォーマットする

この方法では、次を使用できます template 追加によるリテラル バックティック (`) 文字列を囲みます。次に、文字列引数の変数を brackets {} の前にはドル記号「$」が付きます。これらのテンプレートを使用すると、文字列リテラル内に式を埋め込むことができます。

この operaこれは、プレースホルダーと呼ばれる変数とその他の定義された値を連結するのに役立ちます。その結果、最終的な書式設定された文字列は、プレースホルダーの値を補間することによって取得されます。

たとえば、次の XNUMX つの変数を作成しました。"と"id” と入力し、フォーマットされた出力を生成するためにバッククォートで囲みます。 「」に注意してください。${}” 構文は、式を文字列に埋め込むために使用されます。

コード:

const name = "Jenny";
const id = 1;
console.log (`Welcome ${name}, your ID is ${id}`);

プレースホルダーの「name」と「id」の値が表示されていることがわかります。yedこれは、文字列補間が正常に実行されたことを意味します。

出力:

Welcome Jenny, your ID is 1

方法 2: + を使用する OperaJavaScript で文字列をフォーマットする tor

XNUMX 番目のアプローチは、 連結 operaタ +JavaScript の基本的な書式設定文字列については、「」を参照してください。 この方法では、個々の変数と文字列を連結して、目的の出力を生成します。

たとえば、「+」を使用しました。 operator を使用して同じ変数値を連結すると、「console.log()」メソッドはフォーマットされた文字列をコンソールに返します。

コード:

const name = "Jenny";
const id = 1;
console.log("Welcome " + name + ", your ID is " + id);

出力:

Welcome Jenny, your ID is 1

方法 3: JavaScript でのカスタム関数の文字列の書式設定

あなたの中で JavaScriptプログラム、カスタム ファンクション文字列書式設定アプローチを使用することもできます。 この手法では、関数は必要な変数を受け入れ、フォーマットされた文字列を返します。 このフォーマット機能には、非常に高い柔軟性も備わっています。 カスタムやコムの実現にも使用できますplex フォーマット要件。

ここでは、「」という名前のカスタム形式関数を作成しました。ようこそメッセージ()” XNUMX つの変数を受け入れます”"と"id”を引数として指定し、テンプレート文字列リテラルを利用して書式設定された文字列を出力します。

その後、必要な変数を定義し、カスタム形成関数呼び出しの形式で渡しました。

コード:

function welcomeMsg(name, id) {
  return `Welcome ${name}, your ID is ${id}`;
}
const name = "Jenny";
const id = 1;
const msg = welcomeMsg(name, id);
console.log(msg);

出力:

Welcome Jenny, your ID is 1

方法 4: JavaScript で書式指定文字列の連結を使用する

連結 は、JavaScript で文字列をフォーマットするために使用される簡単なメソッドです。このアプローチには、文字列変数または複数の文字列を連結を使用して結合することが含まれます。 operaトール」+”。 この手法は、単純な文字列連結タスクにも使用できます。

提供された例では、変数「ファーストネーム"と"苗字」は「+」を使用して連結されます。 opera「」を形成するためにフルネーム”という文字列は以下のようになります。

コード:

var firstName = "Alex";
var lastName = "Edward";
var fullName = firstName + " " + lastName;
console.log(fullName);

出力:

Alex Edward

方法 5: JavaScript でフォーマット文字列にテンプレート リテラルを使用する

テンプレート文字列 としても知られています テンプレートリテラル JavaScript で文字列をフォーマットするための、より表現力豊かで高度な方法を提供します。 式を直接埋め込むことができ、 variables プレースホルダー「」を使用して文字列内で$ {式}"。

さらに、テンプレート リテラルは複数行の文字列もサポートします。

コード:

var name = "Alex";
var age = 30;
var msg = `Hi, ${name}! You are ${age} years old.`;
console.log(msg);

上の例では、変数「」を直接補間しました。"と"年齢” プレースホルダーを利用して文字列内に”${}” をテンプレート リテラルのバッククォート (`) 内に含めます。

出力:

Hi, Alex! You are 30 years old.

方法 6: 正規表現を使用して JavaScript で文字列をフォーマットする

JavaScript コードでは、 正規表現 は、文字列操作とパターン マッチングに使用される堅牢なツールです。さらに、これらは、特定のパターンを見つけて、定義された値に置き換えるためにも利用されます。これ opera「」の助けを借りて実行できます。交換する ()" 方法。

以下のプログラムをチェックしてください。 replace () メソッドは、プレースホルダーを置き換える XNUMX つの正規表現とともに使用されています。[名前]"と"[ID]」をそれぞれの値に置き換えます。

コード:

let name = "Jenny";
let id = 1;
let message = "Welcome [name], your ID is [id]".replace(/\[name\]/g, name).replace(/\[id\]/g, id);
console.log(message);

これにより、新しい文字列オブジェクトが作成され、「メッセージ” 変数が出力としてコンソールに記録されます。

出力:

Welcome Jenny. Your ID is 1

方法 7: JavaScript で書式設定文字列のカスタム関数を使用する

JavaScript で、より再利用可能でカスタマイズされた文字列形式を作成することもできます。 そのためには、新しい カスタム関数 文字列とその他のパラメータを受け入れます。 これを呼び出して、プレースホルダーを置き換えたり、カスタム書式ルールを適用したりできます。 この手法は、com でのカスタマイズされた書式設定もサポートしています。plex フォーマットシナリオ。

ここでは、「」という名前の新しいカスタム関数形式を作成しました。フォーマット文字列「」を受け入れる文字列"と"paramsは"(配列 パラメータの) を引数として使用します。

関数本体内で、「置換()「プレースホルダーを正規表現で置き換える方法」0 {}, 1 {}」をパラメータ配列のそれぞれの値に置き換えます。

コード:

function formatString(string, params) {
  return string.replace(/{(\d+)}/g, (match, index) => {
    return typeof params[index] !== 'undefined' ? params[index] : match;
  });
}
var name = "Alex";
var age = 30;
var formattedMsg = formatString("Hi, {0}! You are {1} years old.", [name, age]);
console.log(formattedMsg); 

出力:

Hi, Alex! You are 30 years old.

方法 8: XNUMX 進法の使用 OperaJavaScript で文字列をフォーマットする tor

JavaScriptを ターナリー operaタ は、文字列に条件式を記述するための簡略的な方法です。 ただし、指定されたブール式に従って XNUMX つの値のうち XNUMX つを条件付きで選択し、文字列を返すことにより、文字列の書式設定に使用することもできます。

構文:

condition ? expressionIfTrue : expressionIfFalse

3 項を使用するこのコード例を見てください。 operator を使用して文字列オブジェクトにフォーマットします。

コード:

let name = "Jenny";
let isAdmin = true;
let msg = `Welcome ${name}${isAdmin ? ", you are an admin" : ""}`;
console.log(msg);

出力:

Welcome Jenny, you are an admin

ここでは XNUMX つの変数を定義しました。"と"管理者です” と値”ジェニー"と"true"、 それぞれ。

その後、三値を利用しました opera条件付きで文字列「」を追加するには、、あなたは管理者です前述のように、オプションのパラメータ「isAdmin」の値が true の場合、メッセージ文字列に「」を追加します。

JavaScript 文字列フォーマットメソッドの比較

ここでは、上で説明した JavaScript 文字列形式メソッドの長所と短所をまとめました。

方法 Advantages デメリット
Brackets {} バッククォート (`) 付き • 使いやすい。
• 簡潔かつ readable コー​​ド。
これ以上の com には適切ではない可能性がありますplex フォーマット要件。
"+" operaタ わかりやすい。 com を増やすと非効率になる可能性がありますplex フォーマット要件。
文字列フォーマット用のカスタム関数 多くの柔軟性を提供します。 さらなるコーディング作業が必要です。
連結 Operaタ シンプルで広く支持されています。 comにとっては面倒plex 文字列の書式設定。
テンプレートリテラル • 複数行の文字列をサポートします。
• Readable そして直感的な構文。
書式設定オプションの制御が制限されています。
正規表現 多くの柔軟性を提供します。 他の方法と比較すると、実装とメンテナンスが異なります。
カスタム機能 多くの柔軟性を提供します。 カスタム関数を作成および維持するには追加のコーディングが必要です。
ターナリー operaタ null または未定義の値を処理するための簡潔な方法。 これ以上のコムには適していない可能性がありますplex フォーマット要件。

メソッドの選択は、特定の使用例と JavaScript コードの関連要件に大きく依存することに注意してください。

まとめ

In JavaScriptを、テンプレート リテラル、三項を使用できます。 operaトール、”+  operator、正規表現、文字列をフォーマットするためのカスタム関数。これらの文字列形式メソッドを使用すると、開発者は効率的な方法でテキスト データを操作および表示できます。

したがって、読みやすさ、パフォーマンス、ブラウザの互換性に基づいて適切な方法を選択してください。 これにより、開発者はユーザー エクスペリエンスを向上させ、望ましいフォーマット標準を達成できるようになります。