【JavaScript】テンプレートリテラルを簡単に解説

おはようございます。Shotaです。

今回の記事では、JavaScriptのテンプレートリテラルについて詳細に解説します。

テンプレートリテラルとは

テンプレートリテラルとは、文字列の中に定数や変数などを埋め込んだり、改行を入れたりすることで文字列の操作を楽にしてくれる非常に便利な構文です。

テンプレートリテラルを使えば、文字列を連携する際に+を使う必要はありません。そのため、JavaScriptの構文全体がスッキリして見やすくなり、初心者でも理解しやすくなります。

テンプレートリテラルの使い方

使い方は非常に簡単です。テンプレートリテラルでは``(バッククォート)を用います。

構文そのものはそこまで難しくないので、ここからはテンプレートリテラルでできることを見ていきましょう。

改行ができる

テンプレートリテラルでは\nを使わずにそのまま改行できます。

let value = 'Hello\nJavaScript'

let value1 = `Hello
JavaScript`

console.log(value)
console.log(value1)

▼出力結果

Hello
JavaScript
Hello
JavaScript

変数の値を文字列に組み込む

${value}(valueは変数)と表記することで、文字列の中に直接変数を埋め込めます。

let value = 'Hello JavaScript'

console.log(`output: ${value}`)

▼出力結果

output: Hello JavaScript

式を文字列に組み込む

変数だけではなく、式を文字列に埋め込めます。

console.log(`3 + 4 = ${3+4}`)

▼出力結果

3 + 4 = 7

まとめ

今回の記事では、JavaScriptでテンプレートリテラルを使う方法を簡単に解説しました。

今回の記事を参考に、JavaScriptに対する理解を深めていただければ幸いです。

今回の記事はこれで終了です。

【参考サイト】

it-biz.online

developer.mozilla.org