JavaScript >> Javascript 文檔 >  >> Tags >> string

如何在 JavaScript 中加入/連接字符串

簡介

字符串是軟件中最常用的數據類型之一——它們表示我們解析為單詞的字符串。

字符串連接是一項非常標準的任務,尤其是因為我們並不總是處理靜態字符串。我們經常動態創建字符串,例如使用 ES6 模板,或者簡單地連接字符串以形成新的字符串。

在本教程中,我們將了解如何在 JavaScript 中加入/追加/連接字符串。

注意: 字符串是不可變的 ,這意味著它們不能真正改變。每當您對字符串調用更改操作時,都會使用應用的更改構造一個副本,並返回它而不是原始副本。

與 + 運算符連接

字符串連接最簡單,可能也是最直觀的方法是使用 + 運營商:

console.log("hello " + "world");

運行這段簡短的代碼會導致:

hello world

可以將內存中的字符串賦值給引用變量,引用對象而不是直接拼接:

let firstWord = "hello ";
let secondWord = "world";
let newWord = firstWord + secondWord;

這也導致:

hello world

注意: 在大多數情況下,您可以合理地替換 =+ 使用簡寫 += ,這使您可以省略對第一個操作數的引用 ,它將替換為您將結果分配給的變量。

相反,您可以編寫簡寫版本:

let word = "hello ";
word += "world";
console.log(word);

值得注意的是,其他數據類型也可以混合使用,只要可以進行隱式轉換 - JavaScript 就會將數據類型“匹配”為字符串。

例如,整數很容易轉換為字符串,因此如果您嘗試將整數連接到字符串上 - 整數會在附加之前進行轉換。字符串可能不會始終轉換為整數 - 例如當它不代表數字或具有奇數格式時,因此通常將 轉換為 更容易 一個字符串,而不是 from 一個字符串:

var str = "hello";
var int = 21;
var boolean = true;

console.log(str+int);
console.log(str+boolean)

這導致布爾值和整數都被轉換為字符串表示,然後附加到“hello”字符串:

hello21
hellotrue

String.prototype.concat()

concat() 方法是專門為此任務創建的 - 連接 字符串。它可以在任何字符串上調用,並接受另一個字符串連接到調用字符串。

從某種意義上說,它類似於使用簡寫 += 運營商:

let string1 = "Java";
let string2 = "Script";

console.log(string1.concat(string2));

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

這導致:

JavaScript

此外,您可以將分隔符指定為第一個參數,然後將其添加到所有連接的字符串之間:

let string1 = "Java";
let string2 = "Script";

console.log(string1.concat(", ", string2));

這導致:

Java, Script

Array.prototype.join()

join() Array的方法 類用於將數組元素連接成字符串,默認分隔符為逗號 (, )。

這使我們能夠以更簡潔的方式處理大量字符串,並且將文件讀入數組或處理要連接在一起的字符串數組並非聞所未聞。

如果您沒有將任何參數傳遞給該方法 - 默認值將用於分隔新加入的字符串。讓我們傳入一個空字符串來跳過它,然後像我們之前看到的那樣加入它們:

let elements = ["JavaScript", "HTML", "CSS"];
console.log(elements.join(""));

這導致:

JavaScriptHTMLCSS

使用哪種方法?

建議更喜歡concat() 函數而不是 + 運算符 ,由於性能優勢。然而,這實際上並不總是成立,並考慮了幾個假設。

首先 - 您要連接的字符串的數量在其中發揮作用,以及您甚至可能不知道的其他因素。讓我們對 concat() 進行基準測試 方法以及 + 運營商:

console.time('Concatenating with Operator');
concatWithOperator();
console.timeEnd('Concatenating with Operator');

console.time('Concatenating with Function');
concatWithFunction();
console.timeEnd('Concatenating with Function');

function concatWithOperator() {
    let result = "";
    for (let i = 0; i < 10000; i++) {
      result += i;
    }
}

function concatWithFunction() {
    let result = "";
    for (let i = 0; i < 10000; i++) {
      result = result.concat(i);
    }
}

這導致:

Concatenating with Operator: 3.232ms
Concatenating with Function: 1.509ms

但是等等,讓我們切換環境並在另一台機器上運行它:

Concatenating with Operator: 1.985ms
Concatenating with Function: 1.990ms

讓我們在 same 上運行它 再次機器:

Concatenating with Operator: 2.030ms
Concatenating with Function: 0.934ms

執行時間差異很大(儘管速度都可以接受)。還值得注意的是 MDN 的官方聲明,關於性能優勢:

考慮到 concat() 在測試中優於操作員,或者在最壞的情況下是相同 速度。是什麼賦予了?好吧,像這樣的基準測試代碼並不像簡單地運行它並觀察結果那麼容易。

您的瀏覽器、它的版本以及它使用的優化器可能因機器而異,而這些屬性確實會影響性能。例如,我們使用了不同的字符串 在串聯中,從迭代生成的那些。如果我們使用相同的字符串,像 Google 的 V8 這樣的優化器會進一步優化字符串的使用。

測試並驗證您自己的代碼 而不是從表面上接受建議。並非所有的機器和環境都是一樣的,在一台機器上效果很好,在另一台機器上可能效果不佳。在創建應用程序時也要考慮到這一點。

結論

我們已經了解瞭如何使用 + 在 JavaScript 中連接字符串 運算符,join() Arrays 的方法 類以及 concat() String 的方法 類。

我們查看了官方立場並進行了自己的測試,以查看哪種方法的性能最高 - 和往常一樣,這取決於各種因素。


Tutorial JavaScript 教程
  1. 新課程:帶有 Hooks 的下一級 React 應用程序

  2. 使用 React on Netlify 克服部署問題的 2 種方法

  3. 使用 Prisma 的零成本類型安全進行生產開發

  4. 如果您將 beta 版本發佈為 @latest,該怎麼辦

  5. 獲取錯誤 .replace 不是函數

  6. 編程範式

  7. 構建新功能:會談預覽

  1. Svelte 應用程序的文件結構

  2. D1️⃣DigitalOcean 黑客馬拉鬆的想法修復🌌和頭腦風暴🤔

  3. 生成所有可能的真/假組合

  4. 為您的 React 應用程序使用樣式化組件的高級用法 - 第 1 部分

  5. 使用 FluentSecurity 保護 ASP.NET MVC 應用程序

  6. ️ 反擊動畫 | JavaScript✨

  7. 將 Google 地圖添加到 Flutter 應用

  1. useRef 鉤子介紹

  2. 回歸基礎:JavaScript 中的循環

  3. 為什麼認為異步在 JS 中很重要?[Part-1]

  4. 使用 Jotai 管理 React 應用程序的狀態