在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 相关文章推荐
jQuery 页面载入进度条实现代码
Feb 08 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
通过实例讲解JS如何防抖动
Jun 15 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 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之第五天
2006/10/09 PHP
php学习 字符串课件
2008/06/15 PHP
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
php给数组赋值的实例方法
2019/09/26 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
python写入中英文字符串到文件的方法
2015/05/06 Python
python中管道用法入门实例
2015/06/04 Python
Python对象转JSON字符串的方法
2016/04/27 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
详解Python用户登录接口的方法
2019/04/17 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
python logging模块的使用详解
2020/10/23 Python
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
医院检讨书范文
2014/02/01 职场文书
担保书格式范文
2015/09/22 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL