如何在 JavaScript 中將帶連字元的字串轉換為駝峰式命名?
作為開發者,我們經常遇到帶連字元的字串。當字串很長且名稱非常複雜時,帶連字元的字串使我們的程式碼更易讀。為了解決這個問題,我們使用駝峰式命名。駝峰式命名是一種非常流行的命名約定,其中我們將多個單詞組合成一個字串,並透過將每個單詞的首字母大寫(第一個單詞除外)來建立字串。在 JavaScript 中,我們可以使用此約定建立變數和函式名,而不能使用帶連字元的字串建立變數。在本文中,我們將逐步探討將連字元轉換為駝峰式命名的多種方法。在文章結束時,您將能夠應用這些技術來提高程式碼的可讀性和可維護性。
以下是一些將連字元轉換為駝峰式命名的示例:
Input: this-is-an-object Output: thisIsAnObject Input: convert-hyphens-to-camel-case Output: convertHyphensToCamelCase
以下是一些使用 JavaScript 將連字元轉換為駝峰式命名的幾種方法。
使用 String.replace() 方法
使用 Array.map() 和 Array.join() 方法
使用 String.replace() 方法
String.replace 方法是 JavaScript 中的內建方法,用於將字串中的指定值替換為另一個值。以下是使用 String.replace 方法將帶連字元的字串轉換為駝峰式字串的分步過程。
使用 String.replace 方法的第一個引數搜尋連字元後面的所有字母。
您可以使用正則表示式,例如 /-([a-z])/g
此正則表示式選擇兩個元素,第一個是連字元,第二個是連字元後面的字母。
在 String.replace 方法的第二個引數中,返回第二個字母的大寫值。
示例
在此示例中,我們使用 String.replace 方法將帶連字元的字串轉換為駝峰式格式。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Converting Hyphenated string into Camel case string in JavaScript</title>
</head>
<body>
<h3>Converting Hyphenated string into Camel case string using String.replace() method</h3>
<p id="input">String with hyphens: </p>
<p id="output"> String after converting hyphens to camel case: </p>
<script>
// The input String
let inp = "this-is-an-object";
document.getElementById("input").innerHTML += inp;
// Search for the letter after the hyphen and return the uppercase value
inp = inp.replace(/-([a-z])/g, function(k){
return k[1].toUpperCase();
})
// Print the camel case value
document.getElementById("output").innerText += inp;
</script>
</body>
</html>
使用 Array.map() 和 Array.join() 方法
Array.map() 方法是 JavaScript 中的一種方法,它在陣列的每個元素上應用一個函式後建立一個新陣列。此方法不會修改原始陣列。
Array.join 方法用於透過連線陣列的所有元素來將陣列轉換為字串。
要將帶連字元的字串轉換為駝峰式字串,我們使用以下步驟。
使用 String.split 方法從每個連字元分割陣列元素。現在我們有一個數組,其中包含字串的所有單詞作為陣列元素。
現在使用 Array.map 和 String.toUpperCase 方法將每個元素的第一個字母轉換為大寫。
現在使用 Array.join 方法連線陣列元素,最後我們得到了駝峰式字串。
示例
在此示例中,我們將帶連字元的字串轉換為駝峰式字串。
<html>
<head>
<title>Converting Hyphenated string into Camel case string in JavaScript</title>
</head>
<body>
<h3>Convert Hyphenated string into Camel case string using Array.map() and Array.join() methods</h3>
<p id="input">String with hyphens: </p>
<p id="output"> String after converting hyphens to camel case: </p>
<script>
// The input String
let inp = "this-is-an-object";
document.getElementById("input").innerHTML += inp;
// Convert the String into an Array
inp = inp.split("-");
// Remove and save the first element
let firstString = inp.shift();
// Convert every first letter into uppercase
inp = inp.map(function(k){
return k[0].toUpperCase() + k.substring(1);
});
// Join the Array
inp = inp.join("");
// Concatenate the first element
inp = firstString + inp;
// Print the camel case value
document.getElementById("output").innerText += inp;
</script>
</body>
</html>
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP