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

如何在 JavaScript 中使用字符串

這篇文章最初是為 DigitalOcean 寫的。

簡介

一個字符串 是一個或多個字符的序列,可能由字母、數字或符號組成。 JavaScript 中的字符串是原始數據類型並且是不可變的,這意味著它們是不變的。

由於字符串是我們顯示和處理文本的方式,而文本是我們通過計算機進行交流和理解的主要方式,因此字符串是需要熟悉的最基本的編程概念之一。

在本文中,我們將學習如何創建和查看字符串的輸出,如何連接字符串,如何將字符串存儲在變量中,以及在 JavaScript 中字符串中使用引號、撇號和換行符的規則。

創建和查看字符串的輸出

在 JavaScript 中,有三種寫字符串的方法——它們可以寫在單引號內 (' ' )、雙引號 (" " ) 或反引號 (` ` )。使用的引號類型必須在兩邊都匹配,但是所有三種樣式都可以在同一個腳本中使用。

使用雙引號和單引號的字符串實際上是相同的。由於單引號或雙引號字符串沒有約定或官方偏好,所以重要的是在項目程序文件中保持一致。

'This string uses single quotes.'
'This string uses double quotes.'

創建字符串的第三種也是最新的方法稱為 模板文字 .模板文字使用反引號(也稱為重音符號),其工作方式與常規字符串相同,但有一些額外的好處,我們將在本文中介紹。

`This string uses backticks.`

查看字符串輸出的最簡單方法是將其打印到控制台,使用 console.log()

console.log('This is a string in the console.')
This is a string in the console.

另一種輸出值的簡單方法是使用 alert() 向瀏覽器發送警報彈出窗口 :

alert('This is a string in an alert.')

運行上面的行將在瀏覽器的用戶界面中產生以下輸出:

alert() 是一種不太常見的測試和查看輸出的方法,因為關閉警報很快就會變得乏味。

在變量中存儲字符串

JavaScript 中的變量是存儲值的命名容器,使用關鍵字 var , constlet .我們可以將字符串的值賦給命名變量。

const newString = 'This is a string assigned to a variable.'

現在 newString 變量包含我們的字符串,我們可以引用它並將其打印到控制台。

console.log(newString)

這將輸出字符串值。

This is a string assigned to a variable.

通過使用變量來代替字符串,我們不必在每次使用時都重新鍵入字符串,從而使我們在程序中使用和操作字符串變得更加簡單。

字符串連接

串聯 意味著將兩個或多個字符串連接在一起以創建一個新字符串。為了連接,我們使用連接運算符,由 + 表示 象徵。 + 與算術運算一起使用時,符號也是加法運算符。

讓我們在 "Sea" 之間創建一個簡單的連接實例 和 "horse" .

'Sea' + 'horse'
Seahorse

串聯將字符串首尾相連,將它們組合起來並輸出一個全新的字符串值。如果我們想在單詞 Sea 之間留一個空格 和 horse ,我們需要在其中一個字符串中包含一個空格字符:

'Sea ' + 'horse'
Sea horse

我們將字符串和包含字符串值的變量連接起來。

const poem = "The Wide Ocean";
const author = "Pablo Neruda";

const favePoem = "My favorite poem is " + poem + " by " + author ".";
My favorite poem is The Wide Ocean by Pablo Neruda.

當我們通過連接組合兩個或多個字符串時,我們正在創建一個可以在整個程序中使用的新字符串。

帶模板文字的字符串中的變量

模板文字功能的一個特殊功能是能夠在字符串中包含表達式和變量。不必使用連接,我們可以使用 ${} 插入變量的語法。

const poem = 'The Wide Ocean'
const author = 'Pablo Neruda'

const favePoem = `My favorite poem is ${poem} by ${author}.`
My favorite poem is The Wide Ocean by Pablo Neruda.

正如我們所見,在模板文字中包含表達式是實現相同結果的另一種方式。在這種情況下,使用模板文字可能更容易編寫和更方便。

字符串文字和字符串值

您可能會注意到我們在源代碼中編寫的字符串是用引號或反引號括起來的,但實際打印的輸出不包含任何引號。

'Beyond the Sea'
Beyond the Sea

提及這些中的每一個時都有區別。 字符串字面量 是寫在源代碼中的字符串,包括引號。一個字符串值 是我們在輸出中看到的,不包括引號。

在上面的例子中,"Beyond the Sea" 是一個字符串文字,並且 Beyond the Sea 是一個字符串值。

轉義字符串中的引號和撇號

由於引號用於表示字符串,因此在字符串中使用撇號和引號時必須特別注意。例如,嘗試在單引號字符串的中間使用撇號會結束字符串,而 JavaScript 會嘗試將預期字符串的其餘部分解析為代碼。

我們可以通過嘗試在 I'm 中使用撇號來看到這一點 下面收縮:

const brokenString = 'I'm a broken string';

console.log(brokenString);
unknown: Unexpected token (1:24)

這同樣適用於嘗試在雙引號字符串中使用引號。

為了避免在這些情況下引發錯誤,我們可以使用一些選項:

  • 相反的字符串語法
  • 轉義字符
  • 模板字面量

我們將在下面探討這些選項。

使用備用字符串語法

解決可能損壞的字符串的孤立情況的一種簡單方法是使用與您當前使用的字符串語法相反的字符串語法。

例如,使用 " 構建的字符串中的撇號 .

"We're safely using an apostrophe in double quotes."

使用 ' 構建的字符串中的引號 .

'Then he said, "Hello, World!"'

通過組合單引號和雙引號的方式,我們可以控製字符串中引號和撇號的顯示。但是,當我們努力在項目編程文件中使用一致的語法時,這可能很難在整個代碼庫中維護。

使用轉義字符(\ )

我們可以使用反斜杠 (\ ) 轉義字符以防止 JavaScript 將引號解釋為字符串的結尾。

\' 的語法 將始終是單引號,並且 \" 的語法 永遠是雙引號,不用擔心會破壞字符串。

使用這種方法,我們可以在使用 " 構建的字符串中使用撇號 .

'We\'re safely using an apostrophe in single quotes.'

我們還可以在使用 " 構建的字符串中使用引號 .

"Then he said, \"Hello, World!\""

這種方法看起來有點亂,但是你可能需要在同一個字符串中同時使用撇號和引號,這樣就需要轉義了。

使用模板文字

模板文字是用反引號定義的,因此引號和撇號都可以安全地使用,無需任何額外的轉義或考慮。

`We're safely using apostrophes and "quotes" in a template literal.`;

除了防止字符轉義和允許嵌入表達式之外,模板文字還提供多行支持,我們將在下一節中討論。

通過交替使用字符串語法、使用轉義字符和使用模板文字,有幾種方法可以安全地創建字符串。

長字符串和換行符

有時您可能希望在字符串中插入換行符或回車符。 \n\r 轉義字符可用於在代碼輸出中插入換行符。

const threeLines = 'This is a string\nthat spans across\nthree lines.'
This is a string
that spans across
three lines.

從技術上講,這可以使我們的輸出多行。但是,在一行上寫一個很長的字符串很快就會變得非常難以閱讀和使用。我們可以使用連接運算符將字符串顯示在多行上。

const threeLines = 'This is a string\n' + 'that spans across\n' + 'three lines.'

我們可以使用 \ 代替連接多個字符串 轉義字符以轉義換行符。

const threeLines =
  'This is a string\n\
that spans across\n\
three lines.'

為了使代碼更具可讀性,我們可以改用模板文字字符串。這些消除了對包含換行符的長字符串進行連接或轉義的需要。字符串和換行符將被保留。

const threeLines = `This is a string
that spans across
three lines.`
This is a string
that spans across
three lines.

了解創建跨越多行的換行符和字符串的所有方法很重要,因為不同的代碼庫可能使用不同的標準。

結論

在本文中,我們介紹了在 JavaScript 中使用字符串的基礎知識,從使用單引號和雙引號創建和顯示字符串文字、創建模板文字、連接、轉義以及將字符串值分配給變量。


Tutorial JavaScript 教程
  1. Open web hackathon:構建一個簡單的 permaweb 應用程序

  2. GraphQL 客戶端綜合指南,第 3 部分

  3. 錯誤類型錯誤:無法讀取 null 的屬性“鹽”

  4. 解決 DNA 配對 / freeCodeCamp 算法挑戰

  5. 如何在 Mac 上設置反向代理?

  6. 關於 Node.js 中的 ES 模塊您需要了解的內容

  7. 新的電暈圖表

  1. 用簡單的英語學習 React

  2. 頂級等待是真棒! 😍

  3. 使用 CodeLobster 加速 jQuery 開發

  4. 使用 Frontity (WordPress + React) 將 Gudogs 博客增長 88%

  5. 使用 Next.js 和 Netlify CMS 構建免費博客

  6. 如何在 JavaScript 對象文字中使用變量作為鍵?

  7. 覆蓋expressjs中端點的響應狀態

  1. 如何調試 Node.js 應用程序:提示、技巧和工具

  2. 輕鬆破解下一次 JavaScript/React 面試的資源列表

  3. GraphQL Nextjs 幫助

  4. 如何製作帶有可過濾主題的 TalkJS 聊天收件箱