`
天梯梦
  • 浏览: 13612010 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

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

 
阅读更多

  在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里嵌入大量字符串常量的实现方法

    在JavaScript文件里嵌入大量字符串常量是经常遇到的事。有时为了省事,就把一些界面的HTML和CSS直接写在JS文件里

    JavaScript王者归来part.1 总数2

     9.1.1 字符串常量   9.1.2 转义序列   9.1.3 字符串构造函数   9.2 字符串的使用   9.2.1 比较字符串   9.2.2 抽取和检索子串   9.2.3 连接拆分字符串   9.2.4 字符串的模式匹配--一个字符串格式...

    免费的ES6学习思维导图

    模板字符串:通过反引号 ` 来创建字符串,可以在字符串中嵌入表达式,支持多行字符串,使得字符串拼接更加方便。 标签模板:一种高级形式的模板字符串,允许我们在字符串插值之前对其进行处理。 解构赋值: 数组和...

    JavaScript权威指南(第6版)(附源码)

    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 浏览器和屏幕...

    JavaScript权威指南(第6版)

    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 浏览器和屏幕...

    JavaScript权威指南(第6版)中文版pdf+源代码

     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 浏览器...

    JavaScript权威指南(第6版)(中文版)

    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 浏览器和屏幕...

    JavaScript 权威指南(第四版).pdf

     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 浏览器...

    JavaScript权威指南(第6版)中文文字版

    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 浏览器定位和导航 ...

    《javaScrip开发技术大全》源代码

    • sample25.htm 统计一个字符串在另一个字符串中出现的次数 • sample26.htm 使用正则表达式搜索子字符串 • sample27.htm 替换使用字符串查找到的子字符串 • sample28.htm 扩展...

    JavaScript权威指南(第六版) 清晰-完整

    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 浏览器和屏幕...

    JavaScript权威指南(第6版)

    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 浏览器定位和导航 ...

    JavaScript权威指南(第6版) 中文版

    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 浏览器定位和导航 ...

    PHP入门到精通

    字符串操作(教学录像:1小时18分13秒) 5.1字符串简介 5.2单引号和双引号的区别 5.3字符串的连接符 5.4字符串操作 正则表达式(教学录像:28分34秒) 6.1什么是正则表达式 6.2正则表达式语法规则 6.3POSIX扩展正则...

    PHP入门到精通02

    字符串操作(教学录像:1小时18分13秒) 5.1字符串简介 5.2单引号和双引号的区别 5.3字符串的连接符 5.4字符串操作 正则表达式(教学录像:28分34秒) 6.1什么是正则表达式 6.2正则表达式语法规则 6.3POSIX扩展正则...

    php网络开发完全手册

    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...

    PHP和MySQL WEB开发(第4版)

    4.5.1 在字符串中查找字符串:strstr()、strchr()、strrchr()和stristr() 4.5.2 查找子字符串的位置:strpos()、strrpos() 4.5.3 替换子字符串:str_replace()、substr_replace() 4.6 正则表达式的介绍 4.6.1 基础...

Global site tag (gtag.js) - Google Analytics