Cara memberi judul huruf dalam JavaScript

Pengaturcaraan

Masih ingat di sekolah tingkatan semasa guru anda menunjukkan cara menulis kertas dengan betul? Perkara pertama yang anda mulakan ialah tajuk yang baik, dan setiap tajuk yang baik ditulis dengan huruf besar.

Semasa cabaran skrip algoritma ini, kita akan belajar bagaimana memberi judul kalimat dalam JavaScript. Pada akhirnya, algoritma kita akan menggunakan kalimat dan menggunakan huruf pertama setiap perkataan seolah-olah itu adalah tajuk kertas.

Arahan algoritma

Kembalikan rentetan yang disediakan dengan huruf pertama setiap perkataan dengan huruf besar. Pastikan perkataan yang selebihnya ditulis dengan huruf kecil. Untuk tujuan latihan ini, anda juga harus menggunakan huruf penghubung seperti "the" dan "of".

Kes Ujian yang Disediakan

  • titleCase("I'm a little tea pot")harus mengembalikan tali.
  • titleCase("I'm a little tea pot")harus kembali I'm A Little Tea Pot.
  • titleCase("sHoRt AnD sToUt")harus kembali Short And Stout.
  • titleCase("HERE IS MY HANDLE HERE IS MY SPOUT")harus kembali Here Is My Handle Here Is My Spout.

Penyelesaian # 1: .map () dan .slice ()

PEDAC

Memahami Masalah : Kami mempunyai satu input, rentetan. Keluaran kami juga rentetan. Pada akhirnya, kami ingin mengembalikan rentetan input dengan huruf pertama - dan hanya huruf pertama - setiap perkataan ditulis dengan huruf besar.

Contoh / Kes Ujian : Kes ujian yang kami sediakan menunjukkan bahawa kami harus mempunyai huruf besar hanya pada awal setiap perkataan. Kita perlu mengurangkan yang lain. Kes ujian yang disediakan juga menunjukkan bahawa kita tidak dilemparkan bola lengkung dari segi kata majmuk pelik yang dipisahkan oleh simbol dan bukannya ruang kosong. Itu berita baik untuk kami!

Struktur Data : Kita harus mengubah rentetan input kita menjadi array untuk memanipulasi setiap perkataan secara berasingan.

Beberapa nota mengenai kaedah yang akan kami gunakan:

Mari kita bincangkan .map():

.map() membuat array baru dengan hasil memanggil fungsi pada setiap elemen dalam array.

Dengan kata lain, .map()membolehkan kita memanipulasi setiap elemen dalam array dengan fungsi, kemudian mengembalikan array baru dengan hasil manipulasi kita. Fungsi boleh menargetkan nilai semasa dan indeks nilai semasa itu, seperti:

array.map((currentValue, Index) => { // manipulate the currentValue in some way})

Kita tidak selalu perlu menggunakan Indeks. Akan tetapi, ada kalanya kita perlu menyasarkan elemen array mengikut indeksnya, jadi perlu diingat.

Sekarang mari kita lihat contoh .map()tindakan. Kami mempunyai susunan yang penuh dengan nombor dan kami mahu mengalikan setiap nombor dengan 2.

let arrayOfNumbers = [3, 6, 10, 42, 98]arrayOfNumbers.map(number => number * 2)// returns [6, 12, 20, 84, 196]

Sekarang mari kita selidiki .slice():

.slice()mengekstrak bahagian rentetan dan mengembalikannya sebagai rentetan baru. Sekiranya anda memanggil .slice()rentetan tanpa memberikan maklumat tambahan, ia akan mengembalikan keseluruhan rentetan.

"Bastian".slice()// returns "Bastian"

Kami mempunyai pilihan untuk meneruskan .slice()beginIndex dan endIndex, seperti itu

.slice(beginIndex, endIndex)

Ini memberitahu .slice()di mana untuk memulakan pemotongan dan di mana untuk mengakhiri pemotongan. Perlu diingat bahawa rentetan diindeks sifar! Oleh itu, jika kita ingin kembali dari huruf "Bastian" 2-indeks sehingga tetapi tidak termasuk huruf "Bastian" berindeks 5, kita dapat melakukan ini:

"Bastian".slice(2, 5)// returns "sti"

Dengan pemikiran itu, kita dapat memotong awal kata-kata dan mengembalikan yang lain dengan hanya memasukkan beginIndex, seperti:

"Bastian".slice(3)// returns "tian"

Algoritma :

  1. Balikkan semua huruf strmenjadi huruf kecil.
  2. Pisahkan huruf kecil strmenjadi larik, dengan setiap kata menjadi elemen yang terpisah dalam larik.
  3. Huruf besar huruf pertama setiap elemen dalam larik.
  4. Gabungkan setiap elemen larik ke dalam satu rentetan, pisahkan setiap perkataan dengan ruang kosong.
  5. Kembalikan rentetan selubung tajuk.

Kod : Lihat di bawah!

Saya membuat banyak pemboleh ubah tempatan yang tidak perlu dalam kod di atas untuk menunjukkan kesan setiap kaedah pada input. Di bawah ini saya telah membuang pemboleh ubah tempatan, mengikat semua kaedah bersama, dan membuang komen.

Penyelesaian # 2: regex

Amaran! Regex bukanlah penyelesaian terbaik untuk pemula. Ungkapan biasa sukar dilakukan sendiri, dan kerumitannya adalah keluhan umum bagi banyak pembangun yang berpengalaman. Tapi hei, saya rasa suka berpetualang semasa menulis ini, dan saya suka mencabar diri saya untuk lebih memahami regex setiap kali saya boleh. Cabaran skrip algoritma ini sebenarnya sesuai dengan regex, jadi mari kita lihat dan lihat apakah kita dapat meningkatkan pemahaman kita tentang regex!

PEDAC

Memahami Masalah : Kami mempunyai satu input, rentetan. Keluaran kami juga rentetan. Pada akhirnya, kami ingin mengembalikan rentetan input dengan huruf pertama - dan hanya huruf pertama - setiap perkataan ditulis dengan huruf besar.

Contoh / Kes Ujian : Kes ujian yang kami sediakan menunjukkan bahawa kami harus mempunyai huruf besar hanya pada awal setiap perkataan. Kita perlu mengurangkan yang lain. Kes ujian yang disediakan juga menunjukkan bahawa kita tidak dilemparkan bola lengkung dari segi kata majmuk pelik yang dipisahkan oleh simbol dan bukannya ruang kosong. Itu berita baik untuk kami!

Struktur Data : Kami tidak akan mengubah rentetan kami menjadi larik semasa menggunakan ungkapan biasa. JavaScript mempunyai kaedah .replace()yang bagus yang membolehkan kita menargetkan apa sahaja yang kita mahukan dalam rentetan dan menggantinya dengan yang lain. Kami menggunakan ungkapan biasa untuk menargetkan perkara yang ingin kami ganti.

Terdapat begitu banyak simbol yang digunakan dalam ungkapan biasa sehingga saya tidak berharap dapat memberikan gambaran luas tentangnya di sini. Saya boleh mengarahkan anda ke lembaran cheatsheet ini, yang saya gunakan setiap kali saya menggunakan regex.

Apa yang dapat saya lakukan adalah memberitahu anda bahawa regex dengan .replace()JavaScript mengikuti corak asas. .replace()mengambil dua argumen: pola (biasanya ungkapan biasa) dan penggantian (boleh berupa rentetan atau fungsi).

string.replace(regex, function)

Dalam penyelesaian kami, kami akan menggantikan huruf pada awal setiap perkataan. Bagaimana kita mendapat regex untuk melakukan ini untuk kita? Kami memberitahu .replace()untuk memadankan mana-mana watak yang mengikuti ruang kosong atau sepadan dengan watak pertama dari keseluruhan rentetan (kerana kata pertama rentetan tidak mempunyai ruang kosong sebelum itu).

Mari pecahkan bahagian regex penyelesaian kami. Untuk melakukan itu, mari kita lihat argumen pertama .replace()fungsi. Ini adalah kod regex yang menentukan corak apa yang ingin dipadankan dan diganti.

// full solution:
function titleCase(str)  return str.toLowerCase().replace(/(^

Kami akhirnya ingin mencari semua watak bukan ruang kosong, yang diwakili oleh \S.

Kemudian kami ingin menentukan bahawa kami ingin memadankan watak-watak bukan ruang kosong pada awal rentetan ^atau |selepas watak ruang kosong \s.

Kami menambah pengubah global guntuk mencari dan mengganti semua corak sedemikian dalam keseluruhan rentetan.

Algoritma :

  1. Balikkan semua huruf strmenjadi huruf kecil.
  2. Gantikan huruf pertama setiap perkataan dalam rentetan dengan huruf besar.
  3. Kembalikan rentetan selubung tajuk.

Kod : Lihat di bawah!

Sekiranya anda mempunyai penyelesaian dan / atau cadangan lain, sila berkongsi komen!

Artikel ini adalah sebahagian daripada siri Skrip Algoritma freeCodeCamp.

Artikel ini merujuk kepada Skrip Algoritma Asas freeCodeCamp: Judul Huruf a Ayat

Anda boleh mengikuti saya di Medium, LinkedIn, dan GitHub!