欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS字符串拼接的幾種常見方式總結(jié)

 更新時(shí)間：2023年06月28日 18:17:50   作者：D_jing20  
最近有經(jīng)常用到連接字符串的方法,但是對(duì)整體的方法比較模糊,這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于JS字符串拼接的幾種常見方式,需要的朋友可以參考下

前言

在 JavaScript 中，使用字符串連接有 幾 種方式：連接符（+）、反引號(hào)（`）、join()、concat()。

一、使用連接符 “+” 把要連接的字符串連起來

let a = 'java'
let b = a + 'script'
 
//運(yùn)行結(jié)果：javascript

說明：只連接100個(gè)以下的字符串建議用這種方法，最方便

二、使用模板字符串，以反引號(hào)（ ` ）標(biāo)識(shí)

ES6中新增的字符串方法，可以配合反單引號(hào)完成拼接字符串的功能

反單引號(hào)怎么打出來：將輸入法調(diào)整為英文輸入法，單擊鍵盤上數(shù)字鍵1左邊的按鍵。 

用法：

1： 定義需要拼接進(jìn)去的字符串變量

2： 將字符串變量用${}包起來，再寫到需要拼接的地方

注意：反單引號(hào)：` ；單引號(hào)：' 。不要用錯(cuò)了喲~

實(shí)例： 

let a = 'java'
let b = `hello ${a}script`
 
//運(yùn)行結(jié)果：hello javascript

三、使用數(shù)組的 join() 方法連接字符串

定義和用法：

join() 方法將數(shù)組作為字符串返回。 

元素將由指定的分隔符分隔。默認(rèn)分隔符是逗號(hào) (,)。

注釋：join() 方法不會(huì)改變?cè)紨?shù)組。

語法：

array.join(separator)

參數(shù)： 

參數(shù)描述
separator可選。要使用的分隔符。如果省略，元素用逗號(hào)分隔。

返回值： 

類型描述
String字符串值，表示數(shù)組值，由指定的分隔符分隔。

實(shí)例：

let arr = ['hello','java','script']
let str = arr.join(" ")
 
//運(yùn)行結(jié)果：hello java script

join('--') 這個(gè)是可以換的 換--就是用--拼接

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

定義和用法：

concat() 方法用于連接兩個(gè)或多個(gè)字符串。

該方法沒有改變?cè)凶址菚?huì)返回連接兩個(gè)或多個(gè)字符串新字符串。

注釋：concat() 方法不會(huì)修改原字符串的值，與數(shù)組的 concat() 方法操作相似。

語法：

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

參數(shù)： 

參數(shù)描述
string1, string2, ..., stringX必需。將被連接為一個(gè)字符串的一個(gè)或多個(gè)字符串對(duì)象。

返回值： 

類型描述
String兩個(gè)或多個(gè)字符串連接后生成的新字符串。

實(shí)例：

let a = 'java'
let b = 'script'
 
let str = a.concat(b)
 
//運(yùn)行結(jié)果：javascript

五、使用對(duì)象屬性來連接字符串

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);

六、三種方法性能進(jìn)行比較

利用下面代碼對(duì)三種方法性能進(jìn)行比較，通過更改 c 的值來調(diào)整連接字符串的個(gè)數(shù)

var str="";
var d1,d2;
var c=5000;//連接字符串的個(gè)數(shù)
//------------------------測(cè)試第三種方法耗費(fèi)時(shí)間-------
 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());
//-----------------------------------------------------
//------------------------測(cè)試第二種方法耗費(fèi)時(shí)間-------
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());
//-------------------------------------------------------
//------------------------測(cè)試第一種方法耗費(fèi)時(shí)間-------
d1=new Date();for(var i=0;i<c;i++){
    str+="a";
}
d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------

我調(diào)整 c 分別等于5000、50000、500000、5000000，每個(gè)數(shù)值分別測(cè)了10次，最后結(jié)果如下：

c=5000                                                              平均耗時(shí)（單位毫秒）
第三種   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

統(tǒng)計(jì)5000000的時(shí)候在地址欄加入了隨機(jī)參數(shù)，應(yīng)該是避免了緩存的影響的。從結(jié)果來看，第一種方法并不比另2種方法消耗多，甚至還更有優(yōu)勢(shì)，這點(diǎn)和手冊(cè)上的說明明顯不一致。

測(cè)試系統(tǒng)：win 7旗艦

瀏覽器：chrome 52.0.2739.0 m

補(bǔ)充：javaScript 如何使用js追加字符串呢

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <meta name="Author" content=""> 
  <title>字符串追加的三種方式分享</title>
  <script>
    //www.dbjr.com.cn
    //字符串追加演示
    var a ="www.dbjr.com.cn";
    //1： 在字符串后面追加一個(gè)字符
    //1.1 使用concate函數(shù),在字符串后面追加一個(gè)或多個(gè)字符
     var b1 = a.concat("-123","-456");
    //1.2 直接使用加號(hào)(+)
     var b2 = a+"-456"+"-1234";
    //2.在字符串前面加上一個(gè)字符串
       var c1 ="123--"+a;
    //3.在字符串任意位置插入字符串
     //例: 在字符串的第4個(gè)字符位置插入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>

總結(jié)

到此這篇關(guān)于JS字符串拼接的幾種常見方式的文章就介紹到這了,更多相關(guān)JS字符串拼接方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論