JavaScript 怎样高效拼接字符串？ - 知乎有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。271被浏览<strong class="NumberBoard-itemValue" title="5,466分享邀请回答hax.iteye.com/blog/126859 74 条评论分享收藏感谢收起jsperf.com/string-operator-vs-array-join可以明显看出差多少11.7.4 updated:蛋疼做了一个小测试基于这个结果做一个总结：现代浏览器里 operator(+) 不一定会比 join 快（safari 5.0.5，opera 11.10)本身是字符串数组的，直接 join 会更好firefox5 是朵奇葩，join 是最慢的，不管你直接用 operator 还是字符串数组再套一个 for 注：没有原生 ie7，ietester 跑不动这个测试，上面的第一个 ie7 是通过 ie9 测的，不准确 156 条评论分享收藏感谢收起不同平台：pc端静态html分割页面，达到类似php等动态页面的include引入页面效果；手机端单一HTML5页面创建多个页面。
&用html把首页分成三个文件
通过load()方法拼接html页面
在PHP、JSP等动态页面开发中，页面里引入其它页面只需include()进来就可以实现页面的分离。
如果用HTML，可以实现页面的分割吗？答案是肯定的！
两种方法：
一、通过iframe嵌套页面
这个方法不介绍啦，用的很普遍
二、通过AJAX方法load载入页面
通过jQuery的load()方法载入页面
假设有四个页面：index.html、page1.html、page2.html、page3.html，其中首页index.html页面由page1、page2、page3.html的三个页面拼接而成。
index.html页面的主要代码（含js）：
&id=&page1&&&id=&page2&&&id=&page3&&
$(function(){&&&&&$('#page1').load('page1.html');&&&&&$('#page2').load('page2.html');&&&&&$('#page3').load('page3.html');&})&
jquery的load()方法：载入远程 HTML 文件代码并插入至 DOM 中，默认使用GET方式
load(url,data,callback)
参数说明：
url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback:载入成功时回调函数。
page1.html页面的主要代码：
&style=&border:1px&solid&&width:498&height:40&line-height:40&text-align:&background-color:#ddd&我是页面1&
page2.html页面的主要代码：
&style=&float:border:1px&solid&&width:248&height:140&text-align:&background-color:#ddd&我是页面2&
page3.html页面的主要代码：
&style=&float:border:1px&solid&&width:248&height:140&text-align:&background-color:#eee&我是页面3&
通过load()方法载入的页面，需要控制好css样式，这样才能达到完整的页面显示效果。
可以先在一个页面里写好html+css，然后再分离出去，最后用load()载入进来即可！
另外，通过js追加进来的DOM结构，对SEO（搜索引擎优化）有影响，类似百度蜘蛛是无法抓取的！一般情况下不到万不得已的时候，不推荐使用。
移动端单一HTML创建多个页面的方法
可能你想要的不是以上这种效果，而是基于移动端的。比如基于移动框架jquery.mobile开发的，那么在单一 HTML 文件中创建多个页面的方法：
&data-role=&page&&id=&pageone&&&&&data-role=&content&&&&&&&href=&#pagetwo&转到页面二&&&&&&&data-role=&page&&id=&pagetwo&&&&&data-role=&content&&&&&&&href=&#pageone&转到页面一&&&&&
注意属性data-role=&page&的元素要与a链接中的锚点名称一致！这样就能实现一个HTML里切换多个页面啦！
书签初始化中…substring 方法用于提取字符串中介于两个指定下标之间的字符
substring(start,end)
开始和结束的位置，从零开始的索引
参数 &&& 描述start &&& 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。stop &&& 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。返回值一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。说明substring 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。如果 start 或 end 为负数，那么它将被替换为 0。
总结:substring无论怎么写都正确,且遵循正常规则(非负,并且尾不小于首)---如果不是这种状态,那么就要改变为这种正常规则.
2.substr 方法定义和用法substr 方法用于返回一个从指定位置开始的指定长度的子字符串。语法stringObject.substr(start [, length ])参数&&& 描述start&& 必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。length 可选。在返回的子字符串中应包括的字符个数。说明
如果start为负数，则start=str.length+start。如果 length 为 0 或负数，则表明返回的字符串的长度为0,即空字符串。如果没有指定length,那么length即为该字符串的长度。举例：var str = "";alert(str.substring(0));------------""alert(str.substring(5));------------"56789"alert(str.substring(10));-----------""alert(str.substring(12));-----------""alert(str.substring(-5));-----------""alert(str.substring(-10));----------""alert(str.substring(-12));----------""alert(str.substring(0,5));----------"01234"alert(str.substring(0,10));---------""alert(str.substring(0,12));---------""alert(str.substring(2,0));----------"01"alert(str.substring(2,2));----------""alert(str.substring(2,5));----------"234"alert(str.substring(2,12));---------""alert(str.substring(2,-2));---------"01"alert(str.substring(-1,5));---------"01234"alert(str.substring(-1,-5));--------""alert(str.substr(0));---------------""alert(str.substr(5));---------------"56789"alert(str.substr(10));--------------""alert(str.substr(12));--------------""alert(str.substr(-5));--------------"56789"alert(str.substr(-10));-------------""alert(str.substr(-12));-------------""alert(str.substr(0,5));-------------"01234"alert(str.substr(0,10));------------""alert(str.substr(0,12));------------""alert(str.substr(2,0));-------------""alert(str.substr(2,2));-------------"23"alert(str.substr(2,5));-------------"23456"alert(str.substr(2,12));------------""alert(str.substr(2,-2));------------""alert(str.substr(-1,5));------------"9"alert(str.substr(-1,-5));-----------"" &&
在项目实际中我这么做:比如$.get()方法返回的是一个html页面,如何在整个html页面中取得这两个的数值:
&span&定额原基价:&input&type="text"&&value="585."&readonly="readonly"&id="normBasePrice"&&/sapn&&
&span&调整后基价:&input&type="text"&&value="00"&readonly="readonly"&id="normPrice"&&/span&
可以这么做:
首先把需要取得数值的前后两部分分别隔离出来:
//直接取前面从---定额原基价...value="&&这个作为起始位置,结束位置为",这两者之间刚好为第一个要取得数值
var&begin1&=&"定额原基价:&input&type=\"text\"&name=\"normBasePrice\"&value=\"";
var&end1&=&"\"";
//同理如下
var&begin2&=&"调整后基价:&input&type=\"text\"&name=\"normPrice\"&value=\"";
var&end2&=&"\"";
& & 2. 开始截取
$.get(zdyHref,function(data,status){
&&&&if(status){
&&&&&&&&//取得index1的开始位置并加上其length
var&index1&=&data.indexOf(begin1);
//这个新的字符串为585."&readonly="readonly"&id="no...以后的全部html
newStr1&=&data.substring(index1+begin1.length,data.length);
//然后获取这个新字符串第一个"的位置
var&index2&=&newStr1.indexOf(end1);
//把新字符串从最开始到第一个引号"的位置
&&&&&&&&value1&=&newStr1.substring(0,index2);
&&&&&&&&//同理取出第二个数值
&&&&&&&&var&index3&=&data.indexOf(begin2);
newStr2&=&data.substring(index3+begin2.length,data.length);
var&index4&=&newStr2.indexOf(end2);
value2&=&newStr2.substring(0,index4);
$('#normBasePrice').val(value1);//利用取到的值给特定id的元素赋值
$('#normPrice').val(value2);
这种写法有些复杂,但是思路很清晰,当然可以使用正则表达式来截取,没有试过,看见些正则就有些头疼...
& 著作权归作者所有
人打赏支持
码字总数 114952
String对象有许多的方法，因此我们这里的讨论范围只限于其中的两个，indexOf()和 substring()方法。 你已经看到，JavaScript字符串是由字符组成的。这些字符中的每一个都有一个索引。这个索引...
晨曦之光 ?
在js中字符截取函数有常用的三个slice()、substring()、substr()了，下面我来给大家介绍slice()、substring()、substr()函数在字符截取时的一些用法与区别吧。 取字符串的三个函数:slice(st...
javascript中String(字符串对象) String 对象用于处理已有的字符块。 JavaScript 中 slice 、substr 和 substring的区别： 1: String.slice(start,end): 一个新的字符串。包括字符串 string...
参数默认值是指在调用函数时，若省略了某个实参，函数会自动为该参数分配一个默认值，使得函数调用的方便性和灵活性大大提高。 举个例子，比如PHP中的字符串截取函数substr(string,start,len...
justjavac ?
JavaScript字符串方法有很多，其中有三个方法与字符串裁剪有关，他们分别是slice()、substring()和substr()，我把他们统称为“三剑客”。 由于他们都是用于裁剪字符串，很容易混淆，所以接下...
璿而不华 ? 02/05 ?
一、substring方法 返回位于 String 对象中指定位置的子字符串 二、substr方法 返回一个从指定位置开始的指定长度的子字符串 三、split方法 将一个字符串分割为子字符串，然后将结果作为字符...
HarleyZhuge ? 02/08 ?
一、可维护性：可理解性、直观性、可适应性、可扩展性、可调试性 代码约定： 可读性 变量和函数命名 变量类型透明：表示变量类型的三种方式 松散耦合： 解耦HTML/JavaScript 解耦CSS/JavaScr...
jieqiuming ?
用法： 1.substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置，从零开始的索引 参数 描述 start 必需。一个非负的整数，规定要提取的子串的第...
柠檬草的味道 ?
参考资料：http://www.w3school.com.cn/js/index.asp 额，发现 http://www.w3cschool.cc 这里的资料似乎比上面那个更新鲜一些... 一、教程 js是一种轻量级的编程语言，可插入html页面中，并由...
明天以后 ?
一、类型转换 1.转换成字串 ECMAScript的Boolean值、数字和字串的原始值的有趣之处在于它们是伪对象，这意味着它们实际上具有属性和方法。 如： var sColor = "blue"; alert(sColor.length);...
没有更多内容
加载失败，请刷新页面
序 本文主要研究一下hystrix的queueSizeRejectionThreshold参数 HystrixThreadPoolProperties hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPoolProperties.java
go4it ? 9分钟前 ?
F12 或 Ctrl + Shift + I 打开开发者工具，在任意tab上按 Ctrl + Shift + P ，在弹出的输入框里输入 full size screenshot （其实不需要输入完整，可以自动补全），然后按回车即可...
哲别0 ? 10分钟前 ?
题目要求： 有一条彩色宝石项链，是由很多种不同的宝石组成的，包括红宝石，蓝宝石，钻石，翡翠，珍珠等。有一天国王把项链赏赐给了一个学者，并跟他说，你可以带走这条项链，但是王后很喜欢...
圣洁之子 ? 11分钟前 ?
引言 下图是问答系统的发展历史。从2010年起，基于知识库的问答就起步了，所以这个领域已经有八年的研究历史了。 图1 问答的历史发展 知识库问答 知识库问答（KBQA）是以自然语言的形式给出问...
大不了敲一辈子代码 ? 13分钟前 ?
# mongod.conf # for documentation of all options, see: # http://docs.mongodb.org/manual/reference/configuration-options/ # where to write logging data. systemLog: destination: f......
linjin200 ? 13分钟前 ?
一个可以使用的配置文件，主要是jdbc字符串，然后在导入jar包时，注意版本问题，在这里卡了一天。。。。。。。。。。 &?xml version='1.0' encoding='utf-8'?&&!DOCTYPE hibernate-config...
阿豪boy ? 16分钟前 ?
jQuery(document).ready(function ($) {
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
var hashLocation = location.
漫步海边小路 ? 27分钟前 ?
1、查看当前的数据库连接数 select count(*) from v$ --当前的数据库连接数 2、数据库允许的最大连接数 select value from v$parameter where name ='processes'; --数据库允许的最...
stonefive ? 35分钟前 ?
问题 在对接银行过程中，银行回调时请求参数格式为xml，要求返回格式也为xml(CDATA包裹)，利用SpringMVC该怎么处理。 测试 xml格式参数为： &xml&
&order_id&&![CDATA[3584069...
寒武没有纪 ? 35分钟前 ?
在现实生活在，视觉信息总是很吸引人的眼球，好的页面设计总是能够脱颖而出，而卡片设计的应用就是一种趋势。 有数据显示移动端使用率远远高于桌面端，网页设计都能很好的适应小屏幕。这个结...
柳猫 ? 38分钟前 ?
没有更多内容
加载失败，请刷新页面
文章删除后无法恢复，确定取消删除此文章吗？
亲，自荐的博客将通过私信方式通知管理员，优秀的博客文章审核通过后将在博客推荐列表中显示
确定推荐此文章吗？
确定推荐此博主吗？
聚合全网技术文章，根据你的阅读喜好进行个性推荐
指定官方社区
深圳市奥思网络科技有限公司版权所有以下试题来自：
单项选择题在使用HTML语言编写Web页面时，如果希望添加一个超链接，其关联文档位于192.168.15.25，文档名为kaoshi.html，页面显示字符串为“等级考试”，那么应该使用的语句为（）。
A．＜A HREF=&192.168.15.25/等级考试&＞kaoshi.html ＜/A＞
B．＜A HREF=&kaoshihtml/等级考试&＞192.168.15.25 ＜/A＞
C．＜A HREF=&等级考试/kaoshi.html&＞192.168.15.25 ＜/A＞
D．＜A HREF=&192.168.15.25/kaoshi.html&＞等级考试＜/A＞
为您推荐的考试题库
你可能感兴趣的试题
A．安装自己的CA数字证书
B．下载并验证WWW服务器的CA数字证书
C．将WWW服务器放入可信站点区域
D．对下载的信息内容进行病毒扫描
A．配置管理
C．移动管理
D．性能管理
A．主动模式与被动模式
B．递归模式与重复模式
C．反复模式与并发模式
D．添加模式与删除模式
A．&非权威&的解析结果是由解析器造成的
B．域名解析可以从根域名服务器开始
C．使用高速缓冲技术可提高域名解析的效率
D．域名解析的两种方式为递归解析和反复解析
热门相关试卷
最新相关试卷在工作中慢慢学习积累
拼接html a标签字符串，onClick传递两个字符串类型参数写法
在参数传递过程中字符串类型的参数要有引号，我一开始拼接的完成后，没有想到要加引号，后来想到了这一问题，可是怎么拼都不对，于是就搜了很多拼接的例子，发现并没有几个能借鉴的，最后终于在一个人的博客中看到，很感谢他的分享。下面是我自己最后成功的拼接，希望可以帮到别人。
'&a href="#" onclick=changeEnabled("' + planNo + '",' + state + ');&'+yesNo+'&/a&';
planNo:字符串
state: 数字类型
yesNo:字符串
1.在拼接的时候最好遵循 如果在外面使用单引号,字符串中一些属性的值就用双引号包围,反过来也可以,这样就不用使用\来进行转义了.
2 超过两层关系 就要用转义
<span class=