(106) JavaScriptで複数行文字列を書く。

投稿者: | 2021年4月1日

1. やりたいこと

JavaScriptで複数行にまたがって文字列を書きたい。

PHPで書くなら以下のような書き方、いわゆる ヒアドキュメント だ。

$a = 'たちつてと';
$b = <<< EOM
あいうえお
かきくけこ
さしすせそ
{$a}
EOM;

最近は JavaScriptでも テンプレートリテラル なる機能で楽に書けるそうなので、これを学習したい。

2. やってみる

こちらに従って学習してみた。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

index.html
空っぽの divブロックを id=mytxt として置いただけ。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>HP Blog#106</title>
  <script src="jquery-3.5.1.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
<div id="mytxt"></div>
</body>
</html>

script.js
文字列を作成し、空っぽの divブロックの中身とするだけ。

$(function(){
  var a = 'あいうえお';
  var b =
`かきくけこ<br />
さしすせそ<br />
${a}`;
  $('#mytxt').html(b);
});

実行結果はこちら。
https://www.dogrow.net/hp/sample/00106

3. 所感

・きっといつか使いたい場面に遭遇するはず。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)