在JavaScript里嵌入大量字符串常量的实现方法

  数量少还好,多的话就密密麻麻的一坨文字,讲究美观的文艺青年们,会用大量的字符连接符号甚至加上缩进,强制换成好几行。例如:

  

复制代码 代码如下:

  var html =

  '<div>' +

  '<p>Hello</p>' +

  '<p>World'</p>' +

  '</div>';

  这还好,要是字符串里有不少双引号单引号,那就更麻烦了,各种转义字符看的眼花缭乱。

  其实有个不怎么起眼的小技巧,就能解决这个问题。大家总认为字符串必须在"..."或'...'里面,这点没错。但还有一个地方的字符串也能当非代码语义保存下来,那就是一个function的toString,把整个函数的代码当字符串输出——其中的注释部分当然也是保留的!

  所以我们写个空函数,里面就一个/**/注释,其中就是我们想要的常量内容。toString后加一个正则就可以提取我们想要的!

  马上试试:

  

复制代码 代码如下:

  var RES_CODE = _TEXT(function(){/*

  #include <iostream>

  int main()

  {

  std::cout << "Hello world" << std::endl;

  return 0;

  }

  */});

  var RES_POEM = _TEXT(function(){/*

  更吹落,星如雨。

  宝马雕车香满路。

  凤箫声动,玉壶光转,一夜鱼龙舞。

  蛾儿雪柳黄金缕,

  笑语盈盈暗香去。

  众里寻他千百度,

  蓦然回首,那人却在灯火阑珊处。

  */});

  var RES_XML = _TEXT(function(){/*

  <projectDescription>

  <name>Hello</name>

  <comment></comment>

  <projects>

  </projects>

  <buildSpec>

  <buildCommand>

  <name>com.adobe.flexbuilder.project.flexbuilder</name>

  <arguments>

  </arguments>

  </buildCommand>

  <buildCommand>

  <name>com.adobe.flexbuilder.project.apollobuilder</name>

  <arguments>

  </arguments>

  </buildCommand>

  </buildSpec>

  </projectDescription>

  */});

  function _TEXT(wrap) {

  return wrap.toString().match(/\/\*\s([\s\S]*)\s\*\//)[1];

  }

  alert(RES_CODE);

  alert(RES_POEM);

  alert(RES_XML);

  OK!就是Chrome里把注释每行前面的Tab去掉了,如果仅仅是放代码的话问题也不大~ 当然有个前提是字符里不能出现*/

  值得注意的是,压缩代码的时会过滤注释,需要手动排除一部分。