【JavaScript実験】複数行の文字列

文字列を複数行でどう記述するか、についての記事を読んだので、思いつくパターンを整理してみた。

https://cosmology233.github.io/sandbox/hatena/2016/09/19/

(function() {
  var str1 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " +
      "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. " +
      "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. " +
      "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
  
  var str2 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. \
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.".replace(/\s+/g, " ");
    
  var str3 = (function() {/*
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  */}).toString().replace(/^function.+\n\s+|\n\s*\*\/\}$/gi, "").replace(/\n\s+/g, " ");;
  
  var str4 = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`.replace(/\n\s+/g, " ");;
  
  console.log(
      "##### str1 #####\n" +
      str1 + "\n" +
      "##### str2 #####\n" +
      str2 + "\n" +
      "##### str3 #####\n" +
      str3 + "\n" +
      "##### str4 #####\n" +
      str4
  );
})();

f:id:kosumoro:20160919212314j:plain

str1

普通の文字列リテラルの結合の書き方。

str2

文字列リテラル内の改行をエスケープしてしまうことで、改行をなかったことにするやり方。

Googleのスタイルガイドでは Do not do this: と書かれており、非推奨となっている。

The whitespace at the beginning of each line can't be safely stripped at compile time; whitespace after the slash will result in tricky errors.

https://google.github.io/styleguide/javascriptguide.xml?showone=Multiline_string_literals#Multiline_string_literals

str3

無名関数を toString で文字列に変換し、 replace でむりやり体裁を整えたパターン。

str4

es2015で導入されたテンプレートリテラル

Template literal - JavaScript | MDN

ここ1週間くらい、帰宅してからcodecademyのReactの講座を少しずつ進めている。月末にはすべて終えたい。

kosumemo.hatenablog.com