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


Posted in Javascript onJuly 07, 2013

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

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去掉了,如果仅仅是放代码的话问题也不大~ 当然有个前提是字符里不能出现*/

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

Javascript 相关文章推荐
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
AngularJS手动表单验证
Feb 01 Javascript
JavaScript中return用法示例
Nov 29 Javascript
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
JavaScript 定时器详情
Nov 11 Javascript
JQuery表格内容过滤的实现方法
Jul 05 #Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 #Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 #Javascript
javascript实现跳转菜单的具体方法
Jul 05 #Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 #Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 #Javascript
JS 精确统计网站访问量的实例代码
Jul 05 #Javascript
You might like
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
[原创]图片分页查看
2006/08/28 Javascript
Javascript中暂停功能的实现代码
2007/03/04 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
Python实现图片转字符画的示例
2017/08/22 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
售后服务科岗位职责范文
2013/11/13 职场文书
获奖的大学生创业计划书
2014/01/05 职场文书
运动会领导邀请函
2014/01/10 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
紧急迫降观后感
2015/06/15 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL