HomeLập trìnhJavaScriptBa cách đặt...

Ba cách đặt tiêu đề cho một câu trong JavaScript


Bài viết này dựa trên Free Code Camp Basic Algorithm Scripting “Trường hợp tiêu đề một câu”.

Trong thuật toán nàychúng tôi muốn thay đổi một chuỗi văn bản để nó luôn có một chữ in hoa ở đầu mỗi từ.

Trong bài viết này, tôi sẽ giải thích ba cách tiếp cận. Đầu tiên với vòng lặp FOR, thứ hai sử dụng phương thức map() và thứ ba sử dụng phương thức replace().

Thử thách thuật toán

Trả về chuỗi được cung cấp với chữ cái đầu tiên của mỗi từ được viết hoa. Hãy chắc chắn rằng phần còn lại của từ là chữ thường.

Với mục đích của bài tập này, bạn cũng nên viết hoa các từ nối như “the” và “of”.

Các trường hợp thử nghiệm được cung cấp

  • titleCase(“Tôi là bình trà nhỏ”) nên trả về một chuỗi.
  • titleCase(“Tôi là bình trà nhỏ”) nên trả lại “Tôi là một ấm trà nhỏ”.
  • titleCase(“SHoRt And sToUt”) sẽ trả về “Ngắn và mập mạp”.
  • titleCase(“ĐÂY LÀ TAY XỬ LÝ CỦA TÔI ĐÂY LÀ VÒI CỦA TÔI”) sẽ trả về “Đây là tay cầm của tôi Đây là vòi của tôi”.

1. Đặt tiêu đề cho một câu với vòng lặp FOR

Đối với giải pháp này, chúng ta sẽ sử dụng phương thức String.prototype.toLowerCase(), phương thức String.prototype.split(), phương thức String.prototype.charAt(), phương thức String.prototype.slice() và Array. phương thức prototype.join().

  • Các toLowerCase() phương thức trả về giá trị chuỗi gọi được chuyển thành chữ thường
  • Các tách ra() phương thức tách một đối tượng Chuỗi thành một mảng các chuỗi bằng cách tách chuỗi thành các chuỗi con.
  • Các charAt() phương thức trả về ký tự được chỉ định từ một chuỗi.
  • Các lát cắt() phương thức trích xuất một phần của chuỗi và trả về một chuỗi mới.
  • Các tham gia() phương thức nối tất cả các phần tử của một mảng thành một chuỗi.

Chúng ta sẽ cần thêm một khoảng trống giữa dấu ngoặc đơn của tách ra()phương pháp,

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

sẽ xuất ra một mảng các từ riêng biệt:

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

Nếu bạn không thêm dấu cách vào dấu ngoặc đơn, bạn sẽ có kết quả như sau:

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

Chúng tôi sẽ nối

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

— sẽ viết hoa ký tự chỉ số 0 của chuỗi hiện tại trong vòng lặp FOR —

Đọc thêm  Thuật toán JavaScript và Cấu trúc dữ liệu cần giải thích rõ hơn - Cộng tác viên

str[i].slice(1)

— sẽ trích xuất từ ​​chỉ mục 1 đến cuối chuỗi.

Chúng tôi sẽ đặt toàn bộ chuỗi thành chữ thường cho mục đích chuẩn hóa.


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 < str.length; i++) {
    str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1); 
  /* Here str.length = 5
    1st iteration: str[0] = str[0].charAt(0).toUpperCase() + str[0].slice(1);
                   str[0] = "i'm".charAt(0).toUpperCase()  + "i'm".slice(1);
                   str[0] = "I"                            + "'m";
                   str[0] = "I'm";
    2nd iteration: str[1] = str[1].charAt(0).toUpperCase() + str[1].slice(1);
                   str[1] = "a".charAt(0).toUpperCase()    + "a".slice(1);
                   str[1] = "A"                            + "";
                   str[1] = "A";
    3rd iteration: str[2] = str[2].charAt(0).toUpperCase()   + str[2].slice(1);
                   str[2] = "little".charAt(0).toUpperCase() + "little".slice(1);
                   str[2] = "L"                              + "ittle";
                   str[2] = "Little";
    4th iteration: str[3] = str[3].charAt(0).toUpperCase() + str[3].slice(1);
                   str[3] = "tea".charAt(0).toUpperCase()  + "tea".slice(1);
                   str[3] = "T"                            + "ea";
                   str[3] = "Tea";
    5th iteration: str[4] = str[4].charAt(0).toUpperCase() + str[4].slice(1);
                   str[4] = "pot".charAt(0).toUpperCase() + "pot".slice(1);
                   str[4] = "P"                           + "ot";
                   str[4] = "Pot";                                                         
    End of the FOR Loop*/
  }
  
  // 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");
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. Tiêu đề Trường hợp một câu Với phương thức map()

Đối với giải pháp này, chúng tôi sẽ sử dụng phương thức Array.prototype.map().

  • Các bản đồ() phương thức tạo một mảng mới với kết quả của việc gọi một hàm được cung cấp trên mọi phần tử trong mảng này. Việc sử dụng bản đồ sẽ gọi hàm gọi lại được cung cấp một lần cho từng phần tử trong một mảng, theo thứ tự và tạo một mảng mới từ kết quả.

Chúng ta sẽ viết thường và tách chuỗi như đã thấy trong ví dụ trước trước khi áp dụng phương thức map().

Thay vì sử dụng vòng lặp FOR, chúng ta sẽ áp dụng phương thức map() làm điều kiện cho cùng một phép nối từ ví dụ trước.

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

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");
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. Tiêu đề Trường hợp một câu Với các phương thức map() và replace()

Đối với giải pháp này, chúng tôi sẽ tiếp tục sử dụng phương thức Array.prototype.map() và thêm phương thức String.prototype.replace().

  • Các thay thế() phương thức trả về một chuỗi mới với một số hoặc tất cả các kết quả khớp của một mẫu được thay thế bằng một thay thế.
Đọc thêm  Cách xây dựng cầu giao tiếp gốc trong Flutter với WebView và JavaScript

Trong trường hợp của chúng tôi, mẫu cho phương thức thay thế () sẽ là một Chuỗi được thay thế bằng một thay thế mới và sẽ được coi là một chuỗi nguyên văn. Chúng ta cũng có thể sử dụng một biểu hiện thông thường làm mẫu để giải thuật toán này.

Chúng ta sẽ viết thường và tách chuỗi như đã thấy trong ví dụ đầu tiên trước khi áp dụng phương thức map().


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");
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");

Tôi hy vọng bạn tìm thấy điều này hữu ích. Đây là một phần trong loạt bài viết “Cách giải quyết các thuật toán FCC” của tôi về Các thách thức về thuật toán của Free Code Camp, trong đó tôi đề xuất một số giải pháp và giải thích từng bước những gì xảy ra bên trong.

Đọc thêm  Phá hủy cấu trúc trong JavaScript – Cách phá hủy cấu trúc mảng và đối tượng

Ba cách để lặp lại một chuỗi trong JavaScript
Trong bài viết này, tôi sẽ giải thích cách giải quyết thử thách “Lặp lại một chuỗi lặp lại một chuỗi” của freeCodeCamp. Điều này liên quan đến…

Hai cách để xác nhận kết thúc của Chuỗi trong JavaScript
Trong bài viết này, tôi sẽ giải thích cách giải quyết thử thách “Xác nhận Kết thúc” của freeCodeCamp.

Ba cách để đảo ngược một chuỗi trong JavaScript
Bài viết này dựa trên Kịch bản thuật toán cơ bản của Free Code Camp “Reverse a String”

Ba cách để thừa số hóa một số trong JavaScript
Bài viết này dựa trên Free Code Camp Basic Algorithm Scripting “Factorialize a Number”

Hai cách để kiểm tra Palindromes trong JavaScript
Bài viết này dựa trên Free Code Camp Basic Algorithm Scripting “Check for Palindromes”.

Ba cách để tìm từ dài nhất trong chuỗi trong JavaScript
Bài viết này dựa trên Kịch bản thuật toán cơ bản của Free Code Camp “Tìm từ dài nhất trong một chuỗi”.

Ba cách bạn có thể tìm thấy số lớn nhất trong một mảng bằng JavaScript
Trong bài viết này, tôi sẽ giải thích cách giải quyết thử thách “Trả về số lớn nhất trong mảng” của Free Code Camp. Cái này…

Nếu bạn có giải pháp của riêng mình hoặc bất kỳ đề xuất nào, hãy chia sẻ chúng bên dưới phần bình luận.

Hoặc bạn có thể theo dõi tôi trên Trung bình, TwitterGithubLinkedIn.

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

Tài nguyên





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status