概要
文字列を操作する場合、特定の値を動的に追加して文字列を返す必要がある状況が発生する可能性があります。これを行う行為は、文字列補間と呼ばれます。
この動的な値は、変数、状態、または文字列に埋め込まれる実際の値を含むその他のものである可能性があります。
このガイドでは、文字列補間を必要とする可能性のあるさまざまなインスタンスとそれらを実現する方法を考慮して、Reactで文字列補間を実装する方法を見ていきます。
ES5およびES6での文字列補間
文字列補間は、連結とテンプレートリテラルのXNUMXつの方法で実行できます。 連結は文字列補間ではないと主張する人もいますが、文字列補間とは、プレースホルダー置換を行うことによって文字列を作成する機能を指します。これは、連結が明らかに行うことです。
ES6にテンプレートリテラルが導入される前は、常に連結を使用していました。これは、多くの変数の置換を必要とする複数行の文字列を処理する場合に非常に困難になります。 テンプレートリテラルがES6に導入されたとき、特に式を埋め込みたい長い文字列や複数行の文字列の場合、実装がはるかに簡単であることがわかりました。
このガイドでは、両方の方法を確認してから、推奨されるアプローチであるテンプレートリテラルを使用していくつかの例を実行します。
連結と反応する文字列補間
連結の標準的な方法は、 +
特定の変数または状態の周りの演算子:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
上記のコードでは、次の状態になっています。 fontSize
の値は large
。 クラスを動的にフェッチする必要があります。たとえば、次のようになります。 text-small
, text-large
, text-medium
、など。状態に応じて、異なる className
したがって、見出しに適用されます!
連結では、最初に実際の文字列を配置してから、+
変数を実際の文字列で補間する演算子。補間された値を返すことができます。
上記のメソッドは、XNUMXつ以上の変数がある場合、特に文字列が最後ではなく別の文字列内に追加されている場合、複雑になります。
テンプレートリテラルと反応するための文字列補間
これは、文字列補間を処理するための最良の方法です。 ES6で追加されて以来、文字列補間で最も一般的に使用される方法になりました。 文字列テンプレートリテラルを使用して、前の例を繰り返しましょう。
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
上記のコードでわかるように、テンプレートリテラルでplus演算子を使用しなくなりました。代わりに、文字列全体にバッククォートを使用し、ドル記号と中括弧を使用して変数と動的値を挿入します。
ステートメントが評価され、 const fontSize
文字列に挿入されます。
さらにいくつかのReact文字列補間の例を見てみましょう!
文字列補間を利用してReactでスタイル値を渡す方法
Reactの内部でテキストのスタイルを設定するために使用する変数にスタイルデータが格納されている状況では、テンプレートリテラルを使用できます。
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
前に述べたように、ドル記号と中括弧はプレースホルダーを保持するために使用され、これにより適切な方法でスタイルが返されます。
中括弧内で評価を実行することもできます。数値を乗算したい場合は、次のようにします。
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Reactで式を使用して文字列補間を利用する方法
これまでのところ、評価を実行できることを確認してきました。 中括弧内に式を追加して、式に基づいて正しい値を取得し、それを使用できることに注意することも重要です。
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
テンプレートリテラルを使用して複数行の文字列を補間する方法
前に述べたように、テンプレートリテラルを使用すると、複数行の文字列にプレースホルダーを簡単に追加できます。
const App = () => { let user = { name: 'John Doe', age: 14, hobby: 'basket ball', }; let sentence = `The fact that ${user.name} is ${user.age} years old and his hobby is ${user.hobby} amazes me.`; return ( <div className="container"> <div> <p>{sentence}</p> </div> </div> );
};
上記のコードでは、連結を使用する場合と比較して、テンプレートリテラルを使用する方が簡単であることがわかります。
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
テンプレートリテラルで論理演算子を利用する方法
これまで、三項演算子を使用して式を渡す方法を見てきましたが、論理演算子もテンプレートリテラルを使用できることを確認するのが最善です。
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
まとめ
この記事では、XNUMXつの標準的な方法を使用して文字列補間を実装する方法と、テンプレートリテラルがいかに強力であるかを学びました。 テンプレートリテラルの導入以来、ほとんどの人は、使いやすさとコードの可読性が大幅に向上しているため、テンプレートリテラルの使用を好みます。