【转】在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. PHP 安装 eaccelerator

    安装开发工具包: yum groupinstall -y "Development Tools" 查看本机php版本: rpm -qi php 下载rpm包: wget http: ...

  2. 利用mybatis_generator自动生成Dao、Model、Mapping相关文件

    技术交流群:233513714 http://blog.csdn.net/wyc_cs/article/details/9023117 http://www.cnblogs.com/smileberr ...

  3. EXT2 文件系统

    转自:http://www.cnblogs.com/ggjucheng/archive/2012/08/22/2651641.html#ext2_filesystem 认识ext文件系统 硬盘组成与分 ...

  4. 打开eclipse报错:发现了以元素 'd:skin' 开头的无效内容。此处不应含有子元素。

    [错误] 打开eclipse报错:发现了以元素 ‘d:skin’ 开头的无效内容.此处不应含有子元素. [具体报错信息] Error parsing D:\Android-sdks\system-im ...

  5. javascript往textarea追加内容

    <html> <body> <textarea id="content"></textarea> <script> va ...

  6. Linux下编译使用boost库:

    Boost是什么不多说, 下面说说怎样在Linux下编译使用Boost的所有模块. 1. 先去Boost官网下载最新的Boost版本, 我下载的是boost_1_56_0版本, 解压. 2. 进入解压 ...

  7. A quest for the full InnoDB status

    When running InnoDB you are able to dig into the engine internals, look at various gauges and counte ...

  8. 阿里云安装nginx 和 php-fpm

    yum install yum-priorities -y rpm -Uvh http://download.fedora.redhat.com/pub/epel/5/i386/epel-releas ...

  9. HTTP缓存ETAG和Last-Modified

    1) 什么是"Last-Modified"? 在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性标记此文 ...

  10. 024. asp.net中第一次使用GridView (设置鼠标经过时更换背景色)

    1. 前端HTML代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Inde ...