【JavaScript】文字列の中に改行やタブを含ませる

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで文字列の中に改行やタブといったエスケープシーケンスを含ませる方法をご紹介しています。

JavaScriptで文字列の中に改行やタブを入れたいんだけど、どうすればいいの?

上記の疑問にお答えしています。

では、解説していきます。

文字列の中に改行やタブを含ませる

下記は、文字列の中に改行とタブを含ませたサンプルです。

改行

let str = 'Hello\nWorld!';
console.log(str);

//実行結果
"Hello
World!"

タブ

let str = 'Hello\tWorld!';
console.log(str);

//実行結果
"Hello World!"

実行結果を確認すると、改行とタブ、どちらも想定した文字列が出力されているかと思います。出力時に改行やタブに置き換わっている部分には「\ + 文字」の形で特殊な文字が入力されています。これはエスケープシーケンスと呼ばれるもので、予めJavaScript側で用意されている特殊な文字を表す文字列になります。

もう少し詳しくお話ししますね。

エスケープシーケンスとは

エスケープシーケンスとは、キーボードの入力では表現できない文字を「\ + 文字」の形で表せるようにした特別な文字列を指します。前項の改行やタブを出力した\n\tがエスケープシーケンスになります。改行やタブの他にも何種類か用意されています。

エスケープシーケンス一覧

下記は、JavaScriptで利用できるエスケープシーケンスです。

\b バックスペース
\t 水平タブ
\t 垂直タブ
\n 改行
\f 改ページ
\r 復帰
\' シングルクォート
\" ダブルクォート
\` バッククォート
\\ バックスラッシュ
\0 NULL
\xXX 2桁16進数の「Latin-1」文字列
\uXXXX 4桁16進数の「Unicode」文字列
\u{XXXXX} 4桁16進数を超える「Unicode」文字列

全て覚えるのは大変かもしれないですが、シングルクォート、ダブルクォート、バッククォートに関しては現在ではキーボードの入力でも表現することができます。なので他に頻繁に使いそうな「改行」、「タブ」、「バックスペース」辺りを覚えておくと入力がスムーズに進みそうですね!

最後に

エスケープシーケンスは文字列を出力する際に表現の種類を増やしてくれる文字列です。「\ + 文字」で覚えやすいので、よく使うものは記憶に入れておくと良いかもしれないですね!

以上、JavaScriptで文字列の中に改行やタブを含ませる方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍