javascript创建多行字符串的方法(转)
JS里并没有标准的多行字符串的表示方法,但是在用模板的时候,为了保证模板的可阅读性,我们又不可避免的使用多行字符串,所以出现了各种搞法,这里以一段jade的模板作为示例,简单总结和对比一下。
一、字符串相加
这是最容易理解也很常用的一种形式,如下
var tmpl =''+
'!!! 5' +
'html' +
' include header' +
' body' +
' //if IE 6' +
' .alert.alert-error' +
' center 对不起,我们不支持IE6,请升级你的浏览器' +
' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载' +
' a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载' +
' include head' +
' .container' +
' .row-fluid' +
' .span8' +
' block main' +
' include pagerbar' +
' .span4' +
' include sidebar' +
' include footer' +
' include script'
优点:
易理解,简单,可靠
足够灵活,可以在单个字符串中添加js逻辑
缺点 :
并不是真正意义上的多行字符串, 如果想要真正的多行,需要自己加\n
大量的+号看上去满天星,大量的'和", 丑陋
二、使用反斜线
这个叫续行符, 这个并非一种很常见的方式, 但是一旦用上了,还是很容易上瘾,只需要加一个字符
var tmpl ='\
!!! 5\
html\
include header\
body\
//if IE 6\
.alert.alert-error\
center 对不起,我们不支持IE6,请升级你的浏览器\
a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载\
a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载\
include head\
.container\
.row-fluid\
.span8\
block main\
include pagerbar\
.span4\
include sidebar\
include footer\
include script'
优点:
简单,每一行只需要有多一个\
高效!在大部分的浏览器上,这种方式都是最快的,
缺点 :
致命缺陷,每一行的\必须不可以有空格,否则直接脚本错误
并不是真正意义上的多行字符串, 如果想要真正的多行,需要自己加\n
尽管绝大部分的js引擎都支持它,但是它并不是ECMAScript的一部分
三、字符串数组join
var tmpl = [
'!!! 5' ,
'html' ,
' include header' ,
' body' ,
' //if IE 6' ,
' .alert.alert-error' ,
' center 对不起,我们不支持IE6,请升级你的浏览器' ,
' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载' ,
' a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载' ,
' include head' ,
' .container' ,
' .row-fluid' ,
' .span8' ,
' block main' ,
' include pagerbar' ,
' .span4' ,
' include sidebar' ,
' include footer' ,
' include script'].join('\n');
优点:
真正意义上的多行字符串
易理解,简单,可靠
足够灵活,可以在单个字符串中添加js逻辑
缺点 :
大量的,号和'、", 丑陋
五、String.prototype.concat
var tmpl = String.prototype.concat.call(
'!!! 5' ,
'html' ,
' include header' ,
' body' ,
' //if IE 6' ,
' .alert.alert-error' ,
' center 对不起,我们不支持IE6,请升级你的浏览器' ,
' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载' ,
' a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载' ,
' include head' ,
' .container' ,
' .row-fluid' ,
' .span8' ,
' block main' ,
' include pagerbar' ,
' .span4' ,
' include sidebar' ,
' include footer' ,
' include script');
优点:
不常用,事实上字符串的concat方法远没有+号常见
易理解,简单,可靠
足够灵活,可以在单个字符串中添加js逻辑
缺点 :
并不是真正意义上的多行字符串
大量的,号和'、", 丑陋
五、heredoc
这是一种很有技巧的解决办法, 利用了function的toString方法
function heredoc(fn) {
return fn.toString().split('\n').slice(1,-1).join('\n') + '\n'
}
var tmpl = heredoc(function(){/*
!!! 5
html
include header
body
//if IE 6
.alert.alert-error
center 对不起,我们不支持IE6,请升级你的浏览器
a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载
a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载
include head
.container
.row-fluid
.span8
block main
include pagerbar
.span4
include sidebar
include footer
include script
*/});
优点:
模板字符串内不必写多余的任何字符,干净,简单
真正意义上的多行字符串, 有\n哦
缺点 :
不可以在单个字符串中添加js逻辑
容易被压缩器压缩掉,yui compressor可以通过/*!来避免被压缩掉,uglifyjs和gcc也可以通过选项配置不删除特定的注释,这个不是大问题
六、coffeescript
相当于换了一个语言,其实这种语言上缺少的功能,通过coffeescript这种以js为编译目标的语言来实现是一种非常棒的选择。
var tmpl = """
!!! 5
html
include header
body
//if IE 6
.alert.alert-error
center 对不起,我们不支持IE6,请升级你的浏览器
a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载
a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载
include head
.container
.row-fluid
.span8
block main
include pagerbar
.span4
include sidebar
include footer
include script
"""
优点:
易理解,简单,可靠
缺点 :
需要了解coffeescript
整个文件都需要用coffeescript来写
七、ES6
ES6的有一个新的特性,Template Strings, 这是语言层面上第一次实现了多行字符串, 在chrome canary里打开Enable Experimental JavaScript就可以使用这个特性,另外typescript也会支持这种方式
var tmpl =
`!!! 5
html
include header
body
//if IE 6
.alert.alert-error
center 对不起,我们不支持IE6,请升级你的浏览器
a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载
a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载
include head
.container
.row-fluid
.span8
block main
include pagerbar
.span4
include sidebar
include footer
include script`
优点:
易理解,原生支持
真正的多行字符串
缺点 :
JS引擎支持有限
八、总结
看了这么些写法,如何选择?如果你用的是coffeescript,放心大胆的使用它支持的多行字符串写法;如果是在客户端,同时你解决了你的压缩器去掉注释的问题,推荐使用heredoc;如果你无法解决压缩器的问题,使用反斜线连接吧,每行只需要加一个字符。
原文:http://www.jb51.net/article/49480.htm
javascript创建多行字符串的方法(转)的更多相关文章
- Javascript实现多行字符串
打开百度首页,进入控制台的时候,我们在console控制台总可以看到一段文字: 这些文字是如何显示在控制台的呢?? Javascript中的函数被看作是一个对象拥有自己的方法,其中一个小方法fn.to ...
- javascript中数组和字符串的方法比较
× 目录 [1]可索引 [2]转换 [3]拼接[4]创建[5]位置 前面的话 字符串和数组有很多的相同之处,它们的方法众多,且相似度很高:但它们又有不同之处,字符串是不可变值,于是可以把其看作只读的数 ...
- JavaScript基础知识(字符串的方法)
字符串的方法 1.字符串: 在js中被单引号或双引号包起来的内容都是字符串: var t = "true"; console.log(typeof t);// "stri ...
- Javascript创建类的七种方法
/* 第一种定义类的方法 */var cls = new Object();cls.name = "wyf";cls.showName = function(){console.l ...
- C++读入整行字符串的方法
string s; getline(cin,s); cout<<s<<endl; ]; scanf("%[^\n]%*c",s); printf(" ...
- JavaScript创建和获取时间的方法
一.获取时间常用方法 1.创建时间对象 var time=new Date() //创建当前的时间信息对象 var time1=new Date(2022,1,1,10,25,30) //创建2022 ...
- js 创建多行字符串
function heredoc(fn) { ,-).join('\n') + '\n' } var tmpl = heredoc(function(){/* !!! 5 html include h ...
- PHP中的多行字符串传递给JavaScript方法两则
PHP和JavaScript都是初学.近期有这么个需求: 例如说有一个PHP的多行字符串: $a = <<<EOF thy38 csdn blog EOF; 传递给JavaScrip ...
- JavaScript中字符串的方法:charAt()、charCodeAt()、indexOf()、lastIndexOf()、substr()、slice()、substring()、search()、replace()、split()、concat()、toLowerCase()、toUpperCase()
1.字符创的创建: //1.通过new 来创建 var str = String("javascript"); //2.3.直接使用字面量进行创建 var str='html5'; ...
随机推荐
- 使用WebRTC搭建前端视频聊天室——数据通道篇
本文翻译自WebRTC data channels 在两个浏览器中,为聊天.游戏.或是文件传输等需求发送信息是十分复杂的.通常情况下,我们需要建立一台服务器来转发数据,当然规模比较大的情况下,会扩展成 ...
- iOS中的各种id
 网卡Mac地址会随机化 
- c#进阶之神奇的CSharp
CSharp 简写为c#,是一门非常年轻而又有活力的语言. CSharp的诞生 在2000年6月微软发布了c#这门新的语言.作为微软公司.NET 平台的主角,c#吸收了在他之前诞生的语言(c ...
- Node.js 教程 06 - 函数
前言: 本篇介绍的是Node.js中的函数,相对于上一篇会简单一点,其实和我们Javascript中的function无异. 好了,废话不多说了,我们进入正题吧. Node.js函数: [示例1:创建 ...
- Mac下安装GIT的坑
先去 https://git-scm.com/download/mac 下载 GIT 客户端 双击安装,界面中有三个文件 接着双节 .pkg 文件,却提示无法安装 解决方式是按住 Control ,再 ...
- Linux下安装nginx
一直会使用nginx,也学习了好多nginx知识.也在本地安装过nginx,这次是第一次在正式的环境安装nginx,把这些记录下来总结经验. 一.安装环境 操作系统:CentOS release 6. ...
- CANopen学习——PDO
查找资料时,发现一个很好的博客,博主剖析的通俗易懂 http://www.cnblogs.com/winshton/p/4897556.html PDO定义: 过程数据对象,用来传输实时数据.因为 ...
- java工具类
1.HttpUtilsHttp网络工具类,主要包括httpGet.httpPost以及http参数相关方法,以httpGet为例:static HttpResponse httpGet(HttpReq ...
- jsp基础
1.1动态页面 动态页面的优势: 1.交互性:网页会根据用户的要求和选而动态改变和显示内容; 2.自动更新:无需改变页面代码,便会自动更新的页面内容; 3.随机性:当不同的时间,不同的人访问同一网址时 ...
- C#将WebBowser控件替换为Chrome内核
摘要 由于最近要做一个浏览器式的软件,其中有不少地方需要使用到jQuery和BootStrap,但是在C#中,默认的WebBrowser控件默认使用的是IE的core,而低版本的IE在JS加载上总是容 ...