JavaScript で文字列をどのようにフォーマットしますか?

JavaScript で文字列をどのようにフォーマットしますか?

JavaScript では、文字列は一重引用符または二重引用符のペアで囲まれた文字のグループです。 JavaScript で文字列をフォーマットする方法はたくさんあります。





特定のメソッドまたは演算子を使用して文字列を結合できます。特定の操作を実行して、どの文字列がいつどこに表示されるかを決定することもできます。



今日のメイク動画

連結メソッドとテンプレート リテラルを使用して JavaScript 文字列をフォーマットする方法を学びます。





文字列連結

JavaScript では、いくつかの方法を使用して文字列を連結できます。有用なアプローチは、 連結() 方法。このメソッドは、2 つ以上の文字列を使用します。単一の呼び出し文字列を使用し、引数として 1 つ以上の文字列を取ります。

const firstName = "John"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName.concat(" ", lastName); 
console.log(stringVal);

ここで、concat は文字列引数 (空白と lastName) を呼び出し文字列 (firstName) に結合します。次に、コードは結果の新しい文字列を変数 (stringVal) に格納し、 新しい値をブラウザ コンソールに出力します :



concat メソッドの使用

文字列のコレクションを連結する別の方法は、プラス演算子を使用することです。このメソッドを使用すると、文字列変数と文字列リテラルを組み合わせて新しい文字列を作成できます。

const firstName = "John"; 
const middleName = "Mike"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName + " " + middleName + " " + lastName; 
console.log(stringVal);

上記のコードは、次の出力をコンソールに出力します。



プラス演算子文字列連結

JavaScript 文字列を連結する 3 番目の方法では、プラス記号と等号を使用する必要があります。このメソッドを使用すると、既存の文字列の末尾に新しい文字列を追加できます。

const firstName = "John"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName; 
stringVal += " "; 
stringVal += lastName; 
  
console.log(stringVal);

このコードは、空白と lastName 変数の値を firstName 変数に追加し、次の出力を生成します。



文字列のプラス演算子と等号演算子

テンプレート リテラル

テンプレート リテラルは、JavaScript 文字列をフォーマットできる ES6 の機能です。テンプレート リテラルは、バッククォート (`) のペアを使用して文字列を表示します。この文字列フォーマットの方法により、JavaScript でよりきれいな複数行の文字列を表示できます。

let html; 
  
html = `<ul> 
       <li> Name: John Doe </li> 
       <li> Age: 24 </li> 
       <li> Job: Software Engineer </li> 
       </ul>`; 
  
document.body.innerHTML = html;

上記の JavaScript コードは、 HTML ブラウザで 3 つの項目のリストを印刷するには:

テンプレート リテラルの出力

テンプレート リテラルを使用せずに (またはテンプレート リテラルの前に) 同じ出力を得るには、引用符を使用する必要があります。ただし、テンプレート リテラルのようにコードを複数行に拡張することはできません。

新しいPCにUSBからWindows10をインストールする 
let html; 
  
html = "<ul><li>Name: John Doe</li><li>Age: 24</li><li>Job: Software Engineer</li></ul>"; 
  
document.body.innerHTML = html;

文字列補間

テンプレート リテラルを使用すると、補間と呼ばれるプロセスを通じて、JavaScript 文字列で式を使用できます。文字列補間を使用すると、式または変数を文字列に埋め込むことができます。 ${式} プレースホルダー。ここで、JavaScript テンプレート リテラルの価値が真に明らかになります。

let userName = "Jane Doe"; 
let age = 21; 
let job = "Web Developer"; 
let experience = 3; 
  
let html; 
  
html = `<ul> 
       <li> Name: ${userName} </li> 
       <li> Age: ${age} </li> 
       <li> Job Title: ${job} </li> 
       <li> Years of Experience: ${experience} </li> 
       <li> Developer Level: ${experience < 5 ? "Junior to Intermediate" : "Senior"} </li> 
       </ul>`; 
  
document.body.innerHTML = html;

上記のコードは、コンソールに次の出力を生成します。

文字列補間出力

の最初の 4 つの引数 ${式} プレースホルダーは文字列変数ですが、5 番目は条件式です。エクスプレッションは変数 (エクスペリエンス) の 1 つの値に依存し、ブラウザに表示する内容を決定します。

JavaScript を使用して Web ページの要素をフォーマットする

Web ページ開発との機能的な関連付けとは別に、JavaScript は HTML と連携して Web ページのデザインとレイアウトに影響を与えます。テンプレート リテラルの場合と同様に、Web ページに表示されるテキストを操作できます。

HTML を画像に変換して Web ページに表示することもできます。