Javascript字符串拼接小技巧(推荐)

在Javascript中经常会遇到字符串的问题，但是如果要拼接的字符串过长就比较麻烦了。

如果是在一行的，可读性差不说，如果要换行的，会直接报错。

在此介绍几种Javascript拼接字符串的技巧.

字符串相加(+)

var items = '<li class="details">' +
      '<span>Hello world</span>' +
      '</li>';

利用反斜线拼接字符串

var items = '<li class="details">' \
      '<span>Hello world</span>' \
      '</li>';

利用数组拼接字符串

利用数组的join方法，把数组转成字符串.

var empList = ['<li class="details">', '<span>Hello world</span>','</li>'].join("");

在数组的基础上可以封装一个StringBuffer的方法来完成字符串的拼接。

function StringBuffer(){
  this.buffer = [];
}
StringBuffer.prototype = {
  constructor: StringBuffer,
  append: function(str){
    this.buffer.push(str);
    return this;
  },
  toString: function(){
    return this.buffer.join('');
  }
};

ES6模板字符串

ES6中引入了一种新型的字面量语法，称为模板字符串。

用反撇号`来代替原来的单引号或双引号.

$('.warning').html(`
  <h1>Working!</h1>
  <p>迷糊餐厅</p>
  <p>区区一只亚麻太</p>
`);

字符串中的换行、缩进、空格都会原样输出到新生成的字符串中。

如果想要了解字符串拼接的性能问题，推荐去看Nicholas C.Zakas的《高性能Javascript》一书

以上这篇Javascript字符串拼接小技巧(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈JavaScript字符串拼接

    浅谈JavaScript字符串拼接

    在JavaScript中会经常遇到字符串拼接,但是如果要拼接的字符串过长就比较麻烦了. 如果在一行的话,可读性太差:如果换行的话,会直接报错. 现在就来介绍几个JavaScript拼接字符串的几个小技巧(主要针对字符串过长的情况). 1. 字符串相加(+) var empList = ' <li data-view-section="details">'+ '<span>Hello world</span>'+ '</li>'; 2.利用

  • JavaScript组合拼接字符串的效率对比测试

    在脚本开发过程中,经常会按照某个规则,组合拼接出一个大字符串进行输出.比如写脚本控件时控制整个控件的外观的HTML标签输出,比如AJAX里得到服务器端的回传值后动态分析创建HTML标签时,不过这里我就不讨论拼接字符串的具体应用了,我只是想在这里讨论一下拼接的效率. 字符串的拼接在我们写代码的时候都是用"+="这个运算符,s += String; 这是我们最为熟知的写法,不知道大家有没有注意过没有,在组合的字符串容量有几十K甚至几百K的时候,脚本执行起来很慢,CPU使用率狂高,例如: 复

  • 探讨js字符串数组拼接的性能问题

    我们知道,在js中,字符串连接是性能最低的操作之一. 例如: 复制代码 代码如下: var text="Hello";  text+=" World!"; 早期浏览器没有对这种运算进行优化. 由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果.频繁地在后台创建和销毁字符串导制性能异常低下. 因此,可以利用数组对象进行优化. 例如: var buffer=[],i=0; buffer[i++]="Hello"; //通过相应索引值添加元

  • js两种拼接字符串的简单方法(必看)

    如下所示: function(msgArr) { var len = msgArr.length; var n = 0 ; var htmlSpan = ""; for (var j = 0; j < len - 1; j++) { htmlSpan += '<span>·</span>'; } htmlSpan += '<span class="on">·</span>'; var imgs = []; var

  • JavaScript中使用concat()方法拼接字符串的教程

    这种方法将两个或多个字符串,并返回一个新的单字符串. 语法 string.concat(string2, string3[, ..., stringN]); 下面是参数的详细信息: string2...stringN : 这些是要连接字符串. 返回值: 返回一个连接字符串. 例子: <html> <head> <title>JavaScript String concat() Method</title> </head> <body>

  • Javascript中拼接大量字符串的方法

    在php.python中都有heredoc方式的字符串定义方法: php: 复制代码 代码如下: $sql=<<<EOD select * from pages where pagename='$pn' EOD; python: 复制代码 代码如下: print """ This is an example of a string in the heredoc syntax. This text can span multiple lines "&

  • JavaScript中字符串拼接的基本方法

    非常简单,就用一个"+"将两个字符串"相加": var longString = "One piece " + "plus one more piece."; 要将多个字符串累积为一个字符串,还可以使用"+="操作符: var result = ""; result += "My name is Anders" result += " and my age

  • Javascript字符串拼接小技巧(推荐)

    在Javascript中经常会遇到字符串的问题,但是如果要拼接的字符串过长就比较麻烦了. 如果是在一行的,可读性差不说,如果要换行的,会直接报错. 在此介绍几种Javascript拼接字符串的技巧. 字符串相加(+) var items = '<li class="details">' + '<span>Hello world</span>' + '</li>'; 利用反斜线拼接字符串 var items = '<li class=

  • 详解JavaScript中if语句优化和部分语法糖小技巧推荐

    目录 前言 if else 基本使用 简化if判断和优化代码 单行if else 使用&& || 优化 使用三目运算符优化 合并if 使用includes 或者indexof 使用switch流程 优化 多个if else 使用对象 key-value 优化多条if语句 使用map 推荐一些常用的JavaScript语法糖 箭头函数 三目运算符处理函数 函数默认参数处理 数据类型转换 Null.Undefined 布尔值等特殊值处理,使用||结合! 链判断运算符 链判断运算符 空值合并操作

  • jQuery使用经验小技巧(推荐)

    在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以复制并粘贴大部分的代码结构,只要专注最主要的逻辑代码就行了. 使用相同的设计模式和架构也让修复bug或者二次开发更容易.一套经过验证的架构可以保证我的插件不出大的问题,不论插件简单还是复杂.我在这里分享10条我总结的经验. 1. 把你的代码全部放在闭包里面 这是我用的最多的一条.但是有时候在闭包外面的方法会不能调用.不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所

  • JavaScript必看小技巧(必看)

    在这篇文章中将给大家分享有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: functio

  • javascript json对象小技巧之键名作为变量用法分析

    本文实例讲述了javascript json对象小技巧之键名作为变量用法.分享给大家供大家参考,具体如下: 有时候在项目开发过程中,我们需要json对象的键名作为一个变量,键名可变,传统的json格式不支持这个,怎么办呢? 传统的json数据格式 <script type="text/javascript"> var json={ name : "谭勇" } console.log(json.name); </script> 这样是没有问题的

  • 9个JavaScript日常开发小技巧

    1.生成指定范围的数字 在某些情况下,我们会创建一个处在两个数之间的数组.假设我们要判断某人的生日是否在某个范围的年份内,那么下面是实现它的一个很简单的方法 let start = 1900, end = 2000; [...new Array(end + 1).keys()].slice(start); // [ 1900, 1901, ..., 2000] // 还有这种方式,但对于很的范围就不太稳定 Array.from({ length: end - start + 1 }, (_, i

  • 值得收藏的9个提高代码运行效率的小技巧(推荐)

    值得收藏的9个提高代码运行效率的小技巧(推荐)

    我们写程序的目的就是使它在任何情况下都可以稳定工作.一个运行的很快但是结果错误的程序并没有任何用处.在程序开发和优化的过程中,我们必须考虑代码使用的方式,以及影响它的关键因素.通常,我们必须在程序的简洁性与它的运行速度之间做出权衡.今天我们就来聊一聊如何优化程序的性能. 1. 减小程序计算量 1.1 示例代码 for (i = 0; i < n; i++) { int ni = n*i; for (j = 0; j < n; j++) a[ni + j] = b[j]; } 1.2 分析代码

  • postgresql 中的时间处理小技巧(推荐)

    postgresql 中的时间处理小技巧(推荐)

    时间格式处理 按照给定格式返回:to_char(timestamp,format) 返回相差的天数:(date(time1) - current_date) 返回时间戳对应的的日期[yyyy-MM-dd]:date(timestamp) 计算结果取两位小数(方便条件筛选):round((ABS(a-b)::numeric / a), 2) * 100 < 10 时间运算 加减运算 '-' :前x天/月/年 '+' :后x天/月/年 current_timestamp - interval 'x

  • JavaScript的一些小技巧分享

    数组去重 ES6提供了几种简洁的数组去重的方法,但该方法并不适合处理非基本类型的数组.对于基本类型的数组去重,可以使用... new Set()来过滤掉数组中重复的值,创建一个只有唯一值的新数组. const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray); > Result:(4) [1, 2, 3, 5] 这是ES6中的新特性,在ES6之前,要实现同

随机推荐