脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS字符串拼接方式

JS字符串拼接的几种常见方式总结

 更新时间：2023年06月28日 18:17:50   作者：D_jing20  
最近有经常用到连接字符串的方法,但是对整体的方法比较模糊,这里记录一下,下面这篇文章主要给大家介绍了关于JS字符串拼接的几种常见方式,需要的朋友可以参考下

前言

在 JavaScript 中，使用字符串连接有 几 种方式：连接符（+）、反引号（`）、join()、concat()。

一、使用连接符 “+” 把要连接的字符串连起来

let a = 'java'
let b = a + 'script'
 
//运行结果：javascript

说明：只连接100个以下的字符串建议用这种方法，最方便

二、使用模板字符串，以反引号（ ` ）标识

ES6中新增的字符串方法，可以配合反单引号完成拼接字符串的功能

反单引号怎么打出来：将输入法调整为英文输入法，单击键盘上数字键1左边的按键。 

用法：

1： 定义需要拼接进去的字符串变量

2： 将字符串变量用${}包起来，再写到需要拼接的地方

注意：反单引号：` ；单引号：' 。不要用错了哟~

实例： 

let a = 'java'
let b = `hello ${a}script`
 
//运行结果：hello javascript

三、使用数组的 join() 方法连接字符串

定义和用法：

join() 方法将数组作为字符串返回。 

元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。

注释：join() 方法不会改变原始数组。

语法：

array.join(separator)

参数： 

参数描述
separator可选。要使用的分隔符。如果省略，元素用逗号分隔。

返回值： 

类型描述
String字符串值，表示数组值，由指定的分隔符分隔。

实例：

let arr = ['hello','java','script']
let str = arr.join(" ")
 
//运行结果：hello java script

join('--') 这个是可以换的 换--就是用--拼接

四、使用 JavaScript的 concat() 方法连接字符串

定义和用法：

concat() 方法用于连接两个或多个字符串。

该方法没有改变原有字符串，但是会返回连接两个或多个字符串新字符串。

注释：concat() 方法不会修改原字符串的值，与数组的 concat() 方法操作相似。

语法：

string.concat(string1, string2, ..., stringX)

参数： 

参数描述
string1, string2, ..., stringX必需。将被连接为一个字符串的一个或多个字符串对象。

返回值： 

类型描述
String两个或多个字符串连接后生成的新字符串。

实例：

let a = 'java'
let b = 'script'
 
let str = a.concat(b)
 
//运行结果：javascript

五、使用对象属性来连接字符串

function StringConnect(){
    this.arr = []
}
StringConnect.prototype.append = function(str) {
    this.arr.push(str)
}
StringConnect.prototype.toString = function() {
    return this.arr.join("")
}
var mystr = new StringConnect()
mystr.append("abc")
mystr.append("def")
mystr.append("g")
var str = mystr.toString()
console.log(str);
//abcdefg

或

function stringConnect(){
    this._str_=[];
}
stringConnect.prototype.append=function(a){
    this._str_.push(a);
}
stringConnect.prototype.toString=function(){
    return this._str_.join();
}
    var mystr=new stringConnect;
    mystr.append("a");
    var str=mystr.toString();
    console.log(str);

六、三种方法性能进行比较

利用下面代码对三种方法性能进行比较，通过更改 c 的值来调整连接字符串的个数

var str="";
var d1,d2;
var c=5000;//连接字符串的个数
//------------------------测试第三种方法耗费时间-------
 d1=new Date();
function stringConnect(){
    this._str_=new Array();
}
stringConnect.prototype.append=function(a){
    this._str_.push(a);
}
stringConnect.prototype.toString=function(){
    return this._str_.join("");
}
    var mystr=new stringConnect;
    for(var i=0;i<c;i++){
        mystr.append("a");
    }
str=mystr.toString();
 d2=new Date();
 console.log(d2.getTime()-d1.getTime());
//-----------------------------------------------------
//------------------------测试第二种方法耗费时间-------
d1=new Date();
    var arr=new Array();
for(var i=0;i<c;i++){
    arr.push("a");
}
str=arr.join("");
    d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------
//------------------------测试第一种方法耗费时间-------
d1=new Date();for(var i=0;i<c;i++){
    str+="a";
}
d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------

我调整 c 分别等于5000、50000、500000、5000000，每个数值分别测了10次，最后结果如下：

c=5000                                                              平均耗时（单位毫秒）
第三种   3   2   2   3   1   2  2  1   1   1                              1.8
第二种   1   3   0   3   1   3  4  1   4   2                              2.2
第一种   0   0   0   0   0   1  1  1   1   1                              0.5

c=50000

第三种   22  12     9   14    12   13   13   13   10   17          13.5
第二种   8    13   12     8    11   11     8     9     8    9          9.7
第一种   7    12     5    11   10   10   10    13   16  12          10.6

c=500000

第三种 104 70 74 69 76 77 69 102 73 73                            78.7
第二种 78 100 99 99 100 98 96 71 94 97                             93.2
第一种 90 87 83 85 85 83 84 83 88 86                                 85.4

c=5000000

第三种 651 871 465 444 1012 436 787 449 432 444             599.1
第二种 568 842 593 747 417 747 719 549 573 563               631.8
第一种 516 279 616 161 466 416 201 495 510 515               417.5

统计5000000的时候在地址栏加入了随机参数，应该是避免了缓存的影响的。从结果来看，第一种方法并不比另2种方法消耗多，甚至还更有优势，这点和手册上的说明明显不一致。

测试系统：win 7旗舰

浏览器：chrome 52.0.2739.0 m

补充：javaScript 如何使用js追加字符串呢

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <meta name="Author" content=""> 
  <title>字符串追加的三种方式分享</title>
  <script>
    //www.jb51.net
    //字符串追加演示
    var a ="www.jb51.net";
    //1： 在字符串后面追加一个字符
    //1.1 使用concate函数,在字符串后面追加一个或多个字符
     var b1 = a.concat("-123","-456");
    //1.2 直接使用加号(+)
     var b2 = a+"-456"+"-1234";
    //2.在字符串前面加上一个字符串
       var c1 ="123--"+a;
    //3.在字符串任意位置插入字符串
     //例: 在字符串的第4个字符位置插入123
     var d1 = a.slice(0,4) + "第4位插入的字符串" + a.slice(4)
      var d2 = a.slice(0,5).concat("第5位插入的字符串",a.slice(5))
      document.write(b1);
      document.write("<br />");
      document.write(b2);
       document.write("<br />");
      document.write(c1);
      document.write("<br />");
      document.write(d1);
       document.write("<br />");
      document.write(d2);
  </script>
 </head>
 <body>
 </body>
</html>

总结

到此这篇关于JS字符串拼接的几种常见方式的文章就介绍到这了,更多相关JS字符串拼接方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 使用JavaScript实现一个静态链表

    使用JavaScript实现一个静态链表

    这篇文章主要为大家详细介绍了如何使用JavaScript实现一个静态链表，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以跟随小编一起了解一下
    2023-06-06
  • JS简单实现浮动窗口效果示例

    JS简单实现浮动窗口效果示例

    这篇文章主要介绍了JS简单实现浮动窗口效果,涉及javascript操作浮动窗口的创建、打开、关闭等相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • JavaScript中代理与反射的用法详解

    JavaScript中代理与反射的用法详解

    JavaScript作为一门灵活而强大的语言,提供了代理（Proxy）与反射（Reflect）这两个元编程工具,它们为开发者提供了更深层次的语言控制和操作,在本篇博客中,我们将深入研究代理与反射的概念、用法,以及如何巧妙地结合它们来实现高级的编程技巧,需要的朋友可以参考下
    2023-12-12
  • jQuery设置和获取select、checkbox、radio的选中值方法

    jQuery设置和获取select、checkbox、radio的选中值方法

    select、checkbox、radio是很常用的表单控件，这篇文章主要介绍了jQuery设置和获取select、checkbox、radio的选中值方法,有兴趣的可以了解一下。
    2017-01-01
  • JavaScript 深拷贝的循环引用问题详解

    JavaScript 深拷贝的循环引用问题详解

    如果说道实现深拷贝最简单的方法，我们第一个想到的就是 JSON.stringify() 方法，因为JSON.stringify()后返回的是字符串，所以我们会再使用JSON.parse()转换为对象,这篇文章主要介绍了JavaScript 深拷贝的循环引用问题,需要的朋友可以参考下
    2022-12-12
  • JS实现将数字金额转换为大写人民币汉字的方法

    JS实现将数字金额转换为大写人民币汉字的方法

    这篇文章主要介绍了JS实现将数字金额转换为大写人民币汉字的方法,涉及javascript字符串与数组操作的相关技巧,需要的朋友可以参考下
    2016-08-08
  • js如何修改对象数组的key值

    js如何修改对象数组的key值

    这篇文章主要介绍了js如何修改对象数组的key值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • bootstrap select2插件用ajax来获取和显示数据的实例

    bootstrap select2插件用ajax来获取和显示数据的实例

    今天小编就为大家分享一篇bootstrap select2插件用ajax来获取和显示数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • jacascript DOM节点——元素节点、属性节点、文本节点

    jacascript DOM节点——元素节点、属性节点、文本节点

    这篇文章主要介绍了jacascript DOM节点——元素节点、属性节点、文本节点,需要的朋友可以参考下
    2017-04-04
  • js 动态修改css文件用到了cssRule

    js 动态修改css文件用到了cssRule

    js 动态修改css文件，循环用的underscore，在使用cssRule只能使用cssRule.style.padding=0px，详细示例如下
    2014-08-08

最新评论