Tiga Cara untuk Menulis Huruf sebagai Kalimat dalam JavaScript

Artikel ini didasarkan pada Skrip Algoritma Asas Perkhemahan Kod Percuma " Judul Huruf a Ayat "

Dalam algoritma ini , kami ingin mengubah rentetan teks sehingga selalu mempunyai huruf besar pada awal setiap kata.

Dalam artikel ini, saya akan menerangkan tiga pendekatan. Pertama dengan gelung FOR, kedua menggunakan kaedah peta (), dan ketiga menggunakan kaedah ganti ().

Cabaran Algoritma

Kembalikan rentetan yang disediakan dengan huruf pertama setiap perkataan dengan huruf besar. Pastikan selebihnya perkataan dalam huruf kecil.

Untuk tujuan latihan ini, anda juga harus memanfaatkan kata hubung seperti "the" dan "of".

Dengan syarat kes ujian

  • tajukCase ("Saya sedikit teh pot") harus mengembalikan tali.
  • tajukCase ("Saya periuk teh kecil") harus mengembalikan "Saya Pot Teh Sedikit".
  • titleCase ("sHoRt AnD sToUt") harus mengembalikan "Short And Stout".
  • titleCase ("DI SINI TANGAN SAYA DI SINI ADALAH SPOUT SAYA") harus mengembalikan "Inilah Pegangan Saya Di Sini Adalah Tali Saya"

1. Tajuk Kes Hukuman Dengan Gelung FOR

Untuk penyelesaian ini, kami akan menggunakan kaedah String.prototype.toLowerCase (), kaedah String.prototype.split (), kaedah String.prototype.charAt (), kaedah String.prototype.slice () dan Array. kaedah prototaip.join ().

  • Kaedah toLowerCase () mengembalikan nilai rentetan panggilan yang ditukar menjadi huruf kecil
  • Kaedah split () membelah objek String menjadi array rentetan dengan memisahkan rentetan menjadi substring.
  • Kaedah charAt () mengembalikan watak yang ditentukan dari rentetan.
  • Kaedah slice () mengekstrak bahagian rentetan dan mengembalikan rentetan baru.
  • Kaedah bergabung () bergabung dengan semua elemen larik menjadi rentetan.

Kita perlu menambahkan ruang kosong di antara kurungan kaedah split () ,

var strSplit = "I'm a little tea pot".split(' ');

yang akan mengeluarkan pelbagai kata yang terpisah:

var strSplit = ["I'm", "a", "little", "tea", "pot"];

Sekiranya anda tidak menambahkan ruang dalam kurungan, anda akan mempunyai output ini:

var strSplit = ["I", "'", "m", " ", "a", " ", "l", "i", "t", "t", "l", "e", " ", "t", "e", "a", " ", "p", "o", "t"];

Kami akan bergabung

str[i].charAt(0).toUpperCase()

- yang akan huruf besar huruf 0 watak rentetan semasa dalam gelung FOR -

dan

str[i].slice(1)

- yang akan mengekstrak dari indeks 1 hingga akhir rentetan.

Kami akan menetapkan keseluruhan rentetan menjadi huruf kecil untuk tujuan normalisasi.

Dengan komen:

 function titleCase(str) { // Step 1. Lowercase the string str = str.toLowerCase(); // str = "I'm a little tea pot".toLowerCase(); // str = "i'm a little tea pot"; // Step 2. Split the string into an array of strings str = str.split(' '); // str = "i'm a little tea pot".split(' '); // str = ["i'm", "a", "little", "tea", "pot"]; // Step 3. Create the FOR loop for (var i = 0; i  "I'm A Little Tea Pot" } titleCase("I'm a little tea pot");

Tanpa komen:

function titleCase(str) { str = str.toLowerCase().split(' '); for (var i = 0; i < str.length; i++) { str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1); } return str.join(' '); } titleCase("I'm a little tea pot");

2. Judul Huruf a Ayat Dengan peta () Kaedah

Untuk penyelesaian ini, kami akan menggunakan kaedah Array.prototype.map ().

  • Kaedah peta () membuat array baru dengan hasil memanggil fungsi yang disediakan pada setiap elemen dalam array ini. Menggunakan peta akan memanggil fungsi panggilan balik yang disediakan sekali untuk setiap elemen dalam array, mengikut urutan, dan membina susunan baru dari hasilnya.

Kami akan mengurangkan huruf kecil dan membelah rentetan seperti yang dilihat pada contoh sebelumnya sebelum menggunakan kaedah peta ().

Daripada menggunakan gelung FOR, kami akan menggunakan kaedah peta () sebagai syarat pada penggabungan yang sama dari contoh sebelumnya.

(word.charAt(0).toUpperCase() + word.slice(1));

Dengan komen:

 function titleCase(str) { // Step 1. Lowercase the string str = str.toLowerCase() // str = "i'm a little tea pot"; // Step 2. Split the string into an array of strings .split(' ') // str = ["i'm", "a", "little", "tea", "pot"]; // Step 3. Map over the array .map(function(word) { return (word.charAt(0).toUpperCase() + word.slice(1)); /* Map process 1st word: "i'm" => (word.charAt(0).toUpperCase() + word.slice(1)); "i'm".charAt(0).toUpperCase() + "i'm".slice(1); "I" + "'m"; return "I'm"; 2nd word: "a" => (word.charAt(0).toUpperCase() + word.slice(1)); "a".charAt(0).toUpperCase() + "".slice(1); "A" + ""; return "A"; 3rd word: "little" => (word.charAt(0).toUpperCase() + word.slice(1)); "little".charAt(0).toUpperCase() + "little".slice(1); "L" + "ittle"; return "Little"; 4th word: "tea" => (word.charAt(0).toUpperCase() + word.slice(1)); "tea".charAt(0).toUpperCase() + "tea".slice(1); "T" + "ea"; return "Tea"; 5th word: "pot" => (word.charAt(0).toUpperCase() + word.slice(1)); "pot".charAt(0).toUpperCase() + "pot".slice(1); "P" + "ot"; return "Pot"; End of the map() method */ }); // Step 4. Return the output return str.join(' '); // ["I'm", "A", "Little", "Tea", "Pot"].join(' ') => "I'm A Little Tea Pot" } titleCase("I'm a little tea pot");

Tanpa komen:

function titleCase(str) { return str.toLowerCase().split(' ').map(function(word) { return (word.charAt(0).toUpperCase() + word.slice(1)); }).join(' '); } titleCase("I'm a little tea pot");

3. Judul Huruf a Ayat Dengan peta () dan kaedah ganti ()

Untuk penyelesaian ini, kami akan terus menggunakan kaedah Array.prototype.map () dan menambahkan kaedah String.prototype.replace ().

  • The replace() method returns a new string with some or all matches of a pattern replaced by a replacement.

In our case, the pattern for the replace() method will be a String to be replaced by a new replacement and will be treated as a verbatim string. We can also use a regular expression as the pattern to solve this algorithm.

We will lowercase and split the string as seen in the first example before applying the map() method.

With comments:

 function titleCase(str) { // Step 1. Lowercase the string str = str.toLowerCase() // str = "i'm a little tea pot"; // Step 2. Split the string into an array of strings .split(' ') // str = ["i'm", "a", "little", "tea", "pot"]; // Step 3. Map over the array .map(function(word) { return word.replace(word[0], word[0].toUpperCase()); /* Map process 1st word: "i'm" => word.replace(word[0], word[0].toUpperCase()); "i'm".replace("i", "I"); return word => "I'm" 2nd word: "a" => word.replace(word[0], word[0].toUpperCase()); "a".replace("a", "A"); return word => "A" 3rd word: "little" => word.replace(word[0], word[0].toUpperCase()); "little".replace("l", "L"); return word => "Little" 4th word: "tea" => word.replace(word[0], word[0].toUpperCase()); "tea".replace("t", "T"); return word => "Tea" 5th word: "pot" => word.replace(word[0], word[0].toUpperCase()); "pot".replace("p", "P"); return word => "Pot" End of the map() method */ }); // Step 4. Return the output return str.join(' '); // ["I'm", "A", "Little", "Tea", "Pot"].join(' ') => "I'm A Little Tea Pot" } titleCase("I'm a little tea pot");

Without comments:

function titleCase(str) { return str.toLowerCase().split(' ').map(function(word) { return word.replace(word[0], word[0].toUpperCase()); }).join(' '); } titleCase("I'm a little tea pot");

I hope you found this helpful. This is part of my “How to Solve FCC Algorithms” series of articles on the Free Code Camp Algorithm Challenges, where I propose several solutions and explain step-by-step what happens under the hood.

Three ways to repeat a string in JavaScript

In this article, I’ll explain how to solve freeCodeCamp’s “Repeat a string repeat a string” challenge. This involves…

Two ways to confirm the ending of a String in JavaScript

In this article, I’ll explain how to solve freeCodeCamp’s “Confirm the Ending” challenge.

Three Ways to Reverse a String in JavaScript

This article is based on Free Code Camp Basic Algorithm Scripting “Reverse a String”

Three Ways to Factorialize a Number in JavaScript

This article is based on Free Code Camp Basic Algorithm Scripting “Factorialize a Number”

Two Ways to Check for Palindromes in JavaScript

This article is based on Free Code Camp Basic Algorithm Scripting “Check for Palindromes”.

Three Ways to Find the Longest Word in a String in JavaScript

This article is based on Free Code Camp Basic Algorithm Scripting “Find the Longest Word in a String”.

Three ways you can find the largest number in an array using JavaScript

In this article, I’m going to explain how to solve Free Code Camp’s “Return Largest Numbers in Arrays” challenge. This…

If you have your own solution or any suggestions, share them below in the comments.

Or you can follow me on Medium, Twitter, Github and LinkedIn.

‪#‎StayCurious‬, ‪#‎KeepOnHacking‬ & ‪#‎MakeItHappen‬!

Resources

  • toLowerCase() method — MDN
  • toUpperCase() method — MDN
  • charAt() method — MDN
  • slice() method — MDN
  • split() method — MDN
  • join() method — MDN
  • for — MDN
  • map() method — MDN
  • replace() method — MDN