在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);
OK!就是Chrome里把注释每行前面的Tab去掉了,如果仅仅是放代码的话问题也不大~ 当然有个前提是字符里不能出现*/
尝试下看看: http://www.etherdream.com/funnyscript/js_multiline_const_string.html
值得注意的是,压缩代码的时会过滤注释,需要手动排除一部分。
原文:http://www.cnblogs.com/index-html/archive/2013/04/23/js_multiline_const_string.html
相关推荐
在JavaScript文件里嵌入大量字符串常量是经常遇到的事。有时为了省事,就把一些界面的HTML和CSS直接写在JS文件里
9.1.1 字符串常量 9.1.2 转义序列 9.1.3 字符串构造函数 9.2 字符串的使用 9.2.1 比较字符串 9.2.2 抽取和检索子串 9.2.3 连接拆分字符串 9.2.4 字符串的模式匹配--一个字符串格式...
模板字符串:通过反引号 ` 来创建字符串,可以在字符串中嵌入表达式,支持多行字符串,使得字符串拼接更加方便。 标签模板:一种高级形式的模板字符串,允许我们在字符串插值之前对其进行处理。 解构赋值: 数组和...
13.2 在HTML里嵌入JavaScript 13.3 JavaScript程序的执行 13.4 兼容性和互用性 13.5 可访问性 13.6 安全性 13.7 客户端框架 第14章 Window对象 14.1 计时器 14.2 浏览器定位和导航 14.3 浏览历史 14.4 浏览器和屏幕...
13.2 在HTML里嵌入JavaScript 13.3 JavaScript程序的执行 13.4 兼容性和互用性 13.5 可访问性 13.6 安全性 13.7 客户端框架 第14章 Window对象 14.1 计时器 14.2 浏览器定位和导航 14.3 浏览历史 14.4 浏览器和屏幕...
13.2 在HTML里嵌入JavaScript313 13.3 JavaScript程序的执行319 13.4 兼容性和互用性326 13.5 可访问性333 13.6 安全性334 13.7 客户端框架339 第14章 Window对象341 14.1 计时器342 14.2 浏览器...
13.2 在HTML里嵌入JavaScript 13.3 JavaScript程序的执行 13.4 兼容性和互用性 13.5 可访问性 13.6 安全性 13.7 客户端框架 第14章 Window对象 14.1 计时器 14.2 浏览器定位和导航 14.3 浏览历史 14.4 浏览器和屏幕...
13.2 在HTML里嵌入JavaScript313 13.3 JavaScript程序的执行319 13.4 兼容性和互用性326 13.5 可访问性333 13.6 安全性334 13.7 客户端框架339 第14章 Window对象341 14.1 计时器342 14.2 浏览器...
13.2 在html里嵌入javascript 313 13.3 javascript程序的执行 319 13.4 兼容性和互用性 326 13.5 可访问性 333 13.6 安全性 334 13.7 客户端框架 339 第14章 window对象 341 14.1 计时器 342 14.2 浏览器定位和导航 ...
• sample25.htm 统计一个字符串在另一个字符串中出现的次数 • sample26.htm 使用正则表达式搜索子字符串 • sample27.htm 替换使用字符串查找到的子字符串 • sample28.htm 扩展...
13.2 在HTML里嵌入JavaScript 13.3 JavaScript程序的执行 13.4 兼容性和互用性 13.5 可访问性 13.6 安全性 13.7 客户端框架 第14章 Window对象 14.1 计时器 14.2 浏览器定位和导航 14.3 浏览历史 14.4 浏览器和屏幕...
13.2 在html里嵌入javascript 313 13.3 javascript程序的执行 319 13.4 兼容性和互用性 326 13.5 可访问性 333 13.6 安全性 334 13.7 客户端框架 339 第14章 window对象 341 14.1 计时器 342 14.2 浏览器定位和导航 ...
13.2 在html里嵌入javascript 313 13.3 javascript程序的执行 319 13.4 兼容性和互用性 326 13.5 可访问性 333 13.6 安全性 334 13.7 客户端框架 339 第14章 window对象 341 14.1 计时器 342 14.2 浏览器定位和导航 ...
字符串操作(教学录像:1小时18分13秒) 5.1字符串简介 5.2单引号和双引号的区别 5.3字符串的连接符 5.4字符串操作 正则表达式(教学录像:28分34秒) 6.1什么是正则表达式 6.2正则表达式语法规则 6.3POSIX扩展正则...
字符串操作(教学录像:1小时18分13秒) 5.1字符串简介 5.2单引号和双引号的区别 5.3字符串的连接符 5.4字符串操作 正则表达式(教学录像:28分34秒) 6.1什么是正则表达式 6.2正则表达式语法规则 6.3POSIX扩展正则...
12.3.1 在HTML中嵌入JavaScript 184 12.3.2 变量 185 12.3.3 注释 185 12.3.4 函数的定义与调用 186 12.3.5 条件语句 186 12.3.6 循环语句 189 12.3.7 对象 191 12.3.8 事件 192 12.4 PHP动态生成JavaScript代码 193...
4.5.1 在字符串中查找字符串:strstr()、strchr()、strrchr()和stristr() 4.5.2 查找子字符串的位置:strpos()、strrpos() 4.5.3 替换子字符串:str_replace()、substr_replace() 4.6 正则表达式的介绍 4.6.1 基础...