Qual è la differenza tra il metodo + operator e concat() in JavaScript

Question

Il metodo plus (+) e String.concat() fornisce lo stesso risultato.

plus (+) operatore; Metodo

str1 + str2; 

String concat();

str1.concat(str2); 

Addionally, è scritto in w3schools;

Ma con JavaScript, metodi e proprietà sono disponibili per valori primitivi anche, perché JavaScript considera valori primitivi come oggetti durante l'esecuzione di metodi e proprietà.

Quindi, quale modo è meglio utilizzare per combinare sia per le primitive che per gli oggetti String in JS, quali sono i vantaggi e gli svantaggi delle prestazioni tra di essi se ce n'è?

var firstName = "John"  // String 
var y = new String("John"); // with String Object 

Ecco i codici di esempio che danno gli stessi risultati;

function example1() { 
 
    var str1 = "Hello "; 
 
    var str2 = "World!"; 
 
    document.getElementById("demo1").innerHTML += str1 + str2; 
 
} 
 

 

 
function example2() { 
 
    var str1 = "Hello "; 
 
    var str2 = "World!"; 
 
    document.getElementById("demo2").innerHTML += str1.concat(str2); 
 
} 
 

 
function example3() { 
 
    var str1 = String("Hello "); 
 
    var str2 = String("World!"); 
 
    document.getElementById("demo3").innerHTML += str1 + str2; 
 
} 
 

 
function example4() { 
 
    var str1 = String("Hello "); 
 
    var str2 = String("World!"); 
 
    document.getElementById("demo4").innerHTML += str1.concat(str2); 
 
} 
 

 
example1(); 
 
example2(); 
 
example3(); 
 
example4();

<p id="demo1">Demo 1: </p> 
 
<p id="demo2">Demo 2: </p> 
 
<p id="demo3">Demo 3: </p> 
 
<p id="demo4">Demo 4: </p>

Answer 1

Non ci sono abbastanza lo stesso, ma + è più chiaro e di sicuro più veloce.

Osservare this performance test e anche vedere this

Si raccomanda che gli operatori di assegnamento (+, + =) sono utilizzati al posto del metodo concat().

Answer 2

Nessuna differenza in base alla funzionalità, ma operatore '+' è più veloce che concat() per le prestazioni.

var str1="hello"; 
var str2="world"; 
var str3; 
var start = new Date().getTime(); 
for (i = 0; i < 100000; ++i) { 
str3=str1+str2; 
} 
var end = new Date().getTime(); 
var time = end - start; 

print('Execution time using + operator: ' + time); 

// USING CONCAT OPERATOR 

start = new Date().getTime(); 
for (i = 0; i < 100000; ++i) { 
str3=str1.concat(str2); 
} 
end = new Date().getTime(); 
time = end - start; 
print('Execution time using CONCAT operator: ' + time); 

please run at ideone

Answer 3

Non v'è alcuna differenza di comportamento tra i metodi stringa su un primitivo e metodi stringa su un oggetto.

C'è una grande differenza nelle prestazioni in quanto le versioni primitive sembrano essere molto più veloci in this jsperf (forse fino a 100 volte più veloce), probabilmente a causa delle ottimizzazioni dell'interprete.

Come si può vedere dalla this jsperf, la principale differenza in termini di prestazioni è causata da var str1 = new String("Hello "); invece di var str1 = "Hello ";. L'operatore + vs. concat() non fa alcuna differenza. La mia ipotesi è che questo è dovuto al fatto che l'interprete JS sta ottimizzando il metodo della stringa. Ma la creazione di un oggetto stringa reale non è così ottimizzata o efficiente.

Per quanto riguarda le specifiche ECMAScript, in the ECMAScript spec for +, si dice esplicitamente che, se il valore di base operando sinistro (lprim) è una stringa, per poi tornare la stringa che è il risultato della concatenazione ToString(lprim) followed by ToString(rprim).

Nel ECMAScript spec for String.prototype.concat(), si dice: Let R be the String value consisting of the characters in the previous value of R followed by the characters of ToString(next).

Questa formulazione implica che + quando somministrato un operando sinistro come una stringa sta per lanciare l'operando di destra in una stringa e chiamare .concat() internamente che è esattamente ciò che .concat() fa.

Ovviamente se l'operando di sinistra non è una stringa, si otterrebbe un comportamento diverso con + in quanto non lo tratterà necessariamente come un'operazione di stringa.

---

Una situazione che può fare la differenza se si dispone di un oggetto stringa o una stringa primitiva è se si desidera aggiungere una proprietà personalizzata a un oggetto stringa, quindi è necessario il modulo di oggetto, non la forma primitiva .

Per quanto riguarda quando utilizzare + e quando utilizzare .concat(), questa è una scelta di stile di codifica personale. Entrambi ottengono gli stessi risultati. Personalmente preferisco usare gli operatori quando possibile, poiché il codice sembra più semplice da leggere.

A meno che non si abbia un motivo specifico per creare un oggetto stringa, in genere si dovrebbero usare solo le primitive.

Quindi, non c'è davvero alcun motivo per farlo:

var str1 = String("Hello "); 
var str2 = String("World!"); 
document.getElementById("demo").innerHTML = str1.concat(str2); 

quando questo funziona bene:

var str1 = "Hello "; 
var str2 = "World!"; 
document.getElementById("demo").innerHTML = str1 + str2; 

---

Ecco un esempio di l'unica volta che so di quando si potrebbe desidera/ha bisogno di un oggetto stringa esplicito:

// actual string object will retain custom property 
 
var str1 = new String("Hello"); 
 
str1.customProp = "foo"; 
 
log(str1.customProp); 
 

 
// string primitive will not retain custom property 
 
var str2 = "Hello"; 
 
str2.customProp = "foo"; 
 
log(str2.customProp); 
 

 
function log(x) { 
 
    document.write(x + "<br>"); 
 
}