【转】在JavaScript文件里嵌入大量字符串常量是经常遇到的事。有时为了省事,就把一些界面的HTML和CSS直接写在JS文件里。数量少还好,多的话就密密麻麻的一坨文字,讲究美观的文艺青年们,会用大量的字符连接符号甚至加上缩进,强制换成好几行。例如:

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);

在JavaScript里嵌入大量字符串常量的方法的更多相关文章

  1. javascript 未结束的字符串常量

    1.JAVASCRIPT引用时,使用的字符语言不一致. 比如:<script type=”text/javascript” src=”xxx.js” charset=”UTF-8″>.xx ...

  2. JavaScript里最有效率的功能特征检测方法

    代码执行效率对于程序员和程序来说都是至关重要的,尤其是遇到了那些需要大量调用.反复调用的函数方法.在很多Javascript框架里你都能看到有反复调用的函数.当在使用这些框架时,我们必须小心翼翼的尽量 ...

  3. Javascript里,想把一个整数转换成字符串,字符串长度为2

    Javascript里,想把一个整数转换成字符串,字符串长度为2.  想把一个整数转换成字符串,字符串长度为2,怎么弄?比如 1 => "01"11 => " ...

  4. JavaScript里处理字符串的一些常用方法

    1.length 属性返回字符串的长度 let srt = "hello world!"; console.log(srt.length) // 12 2.indexOf() 方法 ...

  5. LoadFromStr的使用中出现错误“未结束的字符串常量”

    最近遇到个奇怪的问题,就是关于js参数中待换行符时,出现了错误“为结束的字符串常量”. 解决方法是:不直接将该数据以参数形式传递,而是先将其赋值在一个隐藏的文本内,需要调用的函数里只需读取该文本里的内 ...

  6. WijmoJS 支持模板字符串常量

    WijmoJS 支持模板字符串常量 在V2019.0 Update2 的全新版本中,WijmoJS 支持了模板字符串常量. 模板字符串是ES2015 / ES6中引入的一个非常棒的JavaScript ...

  7. javascript创建多行字符串的方法(转)

    JS里并没有标准的多行字符串的表示方法,但是在用模板的时候,为了保证模板的可阅读性,我们又不可避免的使用多行字符串,所以出现了各种搞法,这里以一段jade的模板作为示例,简单总结和对比一下. 一.字符 ...

  8. C语言中字符串常量到底存在哪了?

    常量存储总结局部变量.静态局部变量.全局变量.全局静态变量.字符串常量以及动态申请的内存区 1.局部变量存储在栈中2.全局变量.静态变量(全局和局部静态变量)存储在静态存储区3.new申请的内存是在堆 ...

  9. JavaScript里的依赖注入

    JavaScript里的依赖注入 我喜欢引用这句话,“程序是对复杂性的管理”.计算机世界是一个巨大的抽象建筑群.我们简单的包装一些东西然后发布新工具,周而复始.现在思考下,你所使用的语言包括的一些内建 ...

随机推荐

  1. 移动端动画使用transform提升性能

    在移动端做动画,对性能要求较高而通常的改变margin属性是性能极低的,即使使用绝对定位改变top,left这些属性性能也很差因此应该使用transform来进行动画效果,如transform:tra ...

  2. 利用mybatis_generator自动生成Dao、Model、Mapping相关文件

    技术交流群:233513714 http://blog.csdn.net/wyc_cs/article/details/9023117 http://www.cnblogs.com/smileberr ...

  3. 状态压缩dp 入门

    1.有一张n*m (n<=m)的棋盘,在上面放n个中国象棋里的车,使得任意两个车不能相互攻击,总共有多少种不同的方案. 2.有一张n*m (n<=m)的棋盘,其中有些格子里面不能放,在上面 ...

  4. java的nio之:java的nio的服务器实现模型

    [nio服务端序列图]

  5. C++ code: 将程序的输出,保存到txt文档中,且每35个数,自动换行

    // write the predicted score into txt files       ofstream file("/home/wangxiao/Downloads/caffe ...

  6. 拉动滚动条追加内容,无限延伸document高度 $(window).scroll(function(){if($(window).scrollTop() + $(window).height() == $(document).height()) { $("body").append(html) } })

    $(document).ready(function() { // endless scrolling $(window).scroll(function() { if($(window).scrol ...

  7. JS页面间传值

    一:JavaScript静态页面值传递之URL篇 能过URL进行传值.把要传递的信息接在URL上. 例子: 参数传出页面Post.htm—>   <input type="tex ...

  8. 二十四种设计模式:适配器模式(Adapter Pattern)

    适配器模式(Adapter Pattern) 介绍将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作.示例有一个Message实体类 ...

  9. jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法

    原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp   实例 使用 noConflict() 方法为 jQuery 变量规定新 ...

  10. unity,UNITY_PROJ_COORD和tex2Dproj

    看ProjectorMultiply.shader,有这么一句: fixed4 texS = tex2Dproj (_ShadowTex, UNITY_PROJ_COORD(i.uvShadow)); ...