【转】在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);

在JavaScript里嵌入大量字符串常量的方法的更多相关文章

  1. javascript 未结束的字符串常量

    1.JAVASCRIPT引用时,使用的字符语言不一致. 比如:<script type=”text/javascript” src=”xxx.js” charset=”UTF-8″>.xx ...

  2. JavaScript里最有效率的功能特征检测方法

    代码执行效率对于程序员和程序来说都是至关重要的,尤其是遇到了那些需要大量调用.反复调用的函数方法.在很多Javascript框架里你都能看到有反复调用的函数.当在使用这些框架时,我们必须小心翼翼的尽量 ...

  3. Javascript里,想把一个整数转换成字符串,字符串长度为2

    Javascript里,想把一个整数转换成字符串,字符串长度为2.  想把一个整数转换成字符串,字符串长度为2,怎么弄?比如 1 => "01"11 => " ...

  4. JavaScript里处理字符串的一些常用方法

    1.length 属性返回字符串的长度 let srt = "hello world!"; console.log(srt.length) // 12 2.indexOf() 方法 ...

  5. LoadFromStr的使用中出现错误“未结束的字符串常量”

    最近遇到个奇怪的问题,就是关于js参数中待换行符时,出现了错误“为结束的字符串常量”. 解决方法是:不直接将该数据以参数形式传递,而是先将其赋值在一个隐藏的文本内,需要调用的函数里只需读取该文本里的内 ...

  6. WijmoJS 支持模板字符串常量

    WijmoJS 支持模板字符串常量 在V2019.0 Update2 的全新版本中,WijmoJS 支持了模板字符串常量. 模板字符串是ES2015 / ES6中引入的一个非常棒的JavaScript ...

  7. javascript创建多行字符串的方法(转)

    JS里并没有标准的多行字符串的表示方法,但是在用模板的时候,为了保证模板的可阅读性,我们又不可避免的使用多行字符串,所以出现了各种搞法,这里以一段jade的模板作为示例,简单总结和对比一下. 一.字符 ...

  8. C语言中字符串常量到底存在哪了?

    常量存储总结局部变量.静态局部变量.全局变量.全局静态变量.字符串常量以及动态申请的内存区 1.局部变量存储在栈中2.全局变量.静态变量(全局和局部静态变量)存储在静态存储区3.new申请的内存是在堆 ...

  9. JavaScript里的依赖注入

    JavaScript里的依赖注入 我喜欢引用这句话,“程序是对复杂性的管理”.计算机世界是一个巨大的抽象建筑群.我们简单的包装一些东西然后发布新工具,周而复始.现在思考下,你所使用的语言包括的一些内建 ...

随机推荐

  1. 【NOIP2010】【P1317】乌龟棋

    似乎很像搜索的DP(应该也可以用搜索写) 原题: 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物.乌龟棋的棋盘是一行N 个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N 格是终点, ...

  2. CentOS 6 DEPRECATED

    Created by YEISON CAMARGO, last modified by John Boteler on 2016.02.02 Go to start of metadata   Abo ...

  3. UNDERSTANDING POSTGRESQL.CONF: CHECKPOINT_SEGMENTS, CHECKPOINT_TIMEOUT, CHECKPOINT_WARNING

    While there are some docs on it, I decided to write about it, in perhaps more accessible language – ...

  4. java 锁讲解

    每个锁对象都有两个队列,一个是就绪队列,一个是阻塞队列,就绪队列存储了将要获得锁的线程,阻塞队列存储了被阻塞的线程,当一个被线程被唤醒 (notify)后,才会进入到就绪队列,等待获得锁.当一开始线程 ...

  5. vb6通send和recv请求网络资源

    最近为了弄清楚send和recv的用法,特意用vb6测试了一下,头文件冗余的比较多: Option Explicit Private Declare Function setsockopt Lib & ...

  6. nginx 偶发 403原因

    观察errorlog 日志 是否存在类似错误 [error] 12788#0: *322 connection is denied by policyframe[return code:8], 观察是 ...

  7. SQL 将一列多行数据合并为一行 FOR XML PATH

    FOR XML PATH 方法是用于将查询结果集以XML形式展示,这样展示方式的好处不言而喻.现在我要介绍的FOR XML PATH的"另类"用法. 首先,我们先来看看它的正常用法 ...

  8. SSDB

    一个高性能的支持丰富数据结构的 NoSQL 数据库, 用于替代 Redis. 特性 替代 Redis 数据库, Redis 的 100 倍容量 LevelDB 网络支持, 使用 C/C++ 开发 Re ...

  9. HTTP响应头和请求头信息对照表

    HTTP请求头提供了关于请求,响应或者其他的发送实体的信息.HTTP的头信息包括通用头.请求头.响应头和实体头四个部分.每个头域由一个域名,冒号(:)和域值三部分组成. 通用头标:即可用于请求,也可用 ...

  10. jsp中的内置对象(9个)、作用

    jsp内置对象 定义:可以不加声明就在JSP页面脚本(Java程序片和Java表达式)中使用的成员变量 JSP共有以下9种基本内置组件(可与ASP的6种内部组件相对应): 1.request对象 客户 ...