在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 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
深入理解vue路由的使用
Mar 24 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
vue中实现回车键登录功能
Feb 19 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
php 常用类整理
2009/12/23 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python的命名规则知识点总结
2019/10/04 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
大学应届生的自我评价
2014/03/06 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
2014年施工员工作总结
2014/11/18 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
领导参观欢迎词
2015/01/26 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
2015年推普周活动方案
2015/05/06 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python