在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 相关文章推荐
javascript css float属性的特殊写法
Nov 13 Javascript
Prototype Function对象 学习
Jul 12 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
JavaScript数据类型详解
Apr 01 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 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
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
javascript 精粹笔记
2010/05/09 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
python实现神经网络感知器算法
2017/12/20 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
Python生成器常见问题及解决方案
2020/03/21 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
python中xlrd模块的使用详解
2021/02/01 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
百丽国际旗下购物网站:优购
2017/02/28 全球购物
商铺租赁意向书
2014/04/01 职场文书
租房协议书
2014/04/10 职场文书
2016年情人节问候语
2015/11/11 职场文书
学生检讨书范文
2019/06/24 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle