js 如何优雅的拼接字符串

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3777 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近写个前端界面

要用js来动态添加input

发现写长了就乱了改起来也麻烦

大家一般用什么方法？

字符串

前端

input

23 条回复 • 2014-07-31 11:13:27 +08:00

TangMonk

2014-07-30 16:13:16 +08:00

不是有个handlebars模板引擎吗

Tonni

2014-07-30 16:15:42 +08:00

现在看到如何优雅的XXX就觉得恶心，这是病么？
PS：如果字符串过长，直接把模板写到HTML的script标签里面，属性设置为"text/template"，然后直接用jQuery的html()方法取字符串，如果涉及到模板变量、逻辑语句的话就换underscore试试，

wesley

2014-07-30 16:16:52 +08:00

dom最优雅

nocoo

2014-07-30 16:23:09 +08:00

var cache = [];
cache.push('a');
cache.push('b');
cache.push('c');
var result = cache.join(''); // abc

n37r06u3

2014-07-30 16:24:49 +08:00

@TangMonk 用的django 模板要冲突了

n37r06u3

2014-07-30 16:37:39 +08:00

@Tonni underscore 不错

spark

2014-07-30 17:04:58 +08:00 via iPhone

str = "Say #{hello}"

这种如何？Coffee

hkongm

2014-07-30 17:42:47 +08:00

push过时了。。。

俺用
var str = '\
<div> \
</div> \
';

Sivan

2014-07-30 17:45:50 +08:00

可以用模板的话最方便。push 相对「优雅」，但拼字符串可能是最快的。

bombless

2014-07-30 17:49:23 +08:00

看标题还在想加号难道还不够你用么…

也许你是需要一个模板库…

rekey

2014-07-30 17:50:25 +08:00

@Tonni 赞恶心优雅的 XXX

vvtommy

2014-07-30 18:26:20 +08:00

嗯… 之前做过测试，juicer最快。

song940

2014-07-30 18:40:25 +08:00 via iPhone

你需要这个 https://github.com/song940/multiline.js

tamamaxox

2014-07-30 19:58:04 +08:00

handlebars coffee

izoabr

2014-07-30 20:38:32 +08:00

@Tonni 赞+1

fuxkcsdn

2014-07-30 21:35:48 +08:00

[
"<div>",
"<input type='text' />",
" </div>"
].join('');
看起来还算“优雅”

dant

2014-07-30 22:56:03 +08:00 via iPhone

这浓浓的知乎风是怎么回事。。

dreampuf

2014-07-31 00:47:24 +08:00

如果把优雅换成 best practice 大家会不会容易接受点？或者用“地道、接地气”？

V2EX里出现“优雅”的发问比知乎早很多
https://www.google.com/search?q=site:v2ex.com/t%20%E4%BC%98%E9%9B%85&gws_rd=ssl

=====

Coffee 的内嵌语法无疑是最优美的，拼接的糙活儿都给你做了。
反斜杠只是解决了将一行字符串分成多行，没有解决拼接的问题。
Array.push 方法在语法层面利用数组特性避免了连接符号，但是带来的开销是非常慢（真的非常慢，现代浏览器都会对静态字符串做优化 http://jsperf.com/string-concatenation/79 ）
multiline利用注释和Function.toString做的小把戏，如果有一些预处理（UglifyJS）会影响结果。

最佳实践都是日常积累而来，如果光问个结论可能不会让自己收获多少，也许这就是人们反感“优雅的XXX”的原因。