a

Câu hỏi Làm thế nào để làm cho chữ cái đầu tiên của một chữ hoa trong JavaScript?


Làm thế nào để làm cho chữ cái đầu tiên của một chữ hoa, nhưng không thay đổi trường hợp của bất kỳ các chữ cái khác?

Ví dụ:

  • "this is a test" -> "This is a test"
  • "the Eiffel Tower" -> "The Eiffel Tower"
  • "/index.html" -> "/index.html"

2969
2018-06-22 08:25


gốc


Dấu gạch dưới có một plugin được gọi là underscore.string bao gồm điều này và một loạt các công cụ tuyệt vời khác. - Aaron
Thế còn: return str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();}); - Muhammad Umer
Đơn giản hơn: string[0].toUpperCase() + string.substring(1) - dr.dimitru
3 trang câu trả lời để viết một chữ cái viết hoa - Andrew
xin vui lòng ai đó nói với tôi tại sao câu hỏi này là rất phổ biến !!! có điều gì tôi không hiểu không? 4K bỏ phiếu cho câu trả lời này? chỉ là vì sao? - Nozar Safari


Các câu trả lời:


function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

Một số câu trả lời khác sửa đổi String.prototype (câu trả lời này cũng được sử dụng), nhưng tôi khuyên bạn nên chống lại điều này ngay bây giờ do khả năng bảo trì (khó tìm ra nơi chức năng được thêm vào prototype và có thể gây xung đột nếu mã khác sử dụng cùng một tên / trình duyệt thêm chức năng gốc có cùng tên đó trong tương lai).


4736
2018-06-22 08:30



chuỗi con được hiểu trong nhiều trình duyệt hơn là chất nền - mplungjan
để thêm vào karim79 - nó có lẽ quá mức cần thiết để làm cho nó một chức năng như javascript sẽ làm điều tương tự với biến mà không có gói chức năng. Tôi cho rằng nó sẽ được rõ ràng hơn bằng cách sử dụng một chức năng, nhưng bản địa của nó nếu không, tại sao phức tạp nó với một wrapper chức năng? - Ross
Đừng bận tâm...""[0].toUpperCase() thất bại - Crisfole
Chúng ta không nên toLowerCase lát (1)? - hasen
Không, bởi vì OP đã đưa ra ví dụ này: the Eiffel Tower -> The Eiffel Tower. Thêm vào đó, hàm được gọi capitaliseFirstLetter không phải capitaliseFirstLetterAndLowerCaseAllTheOthers. - ban-geoengineering


Một cách tiếp cận hướng đối tượng hơn:

String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

Và sau đó:

"hello world".capitalize();  =>  "Hello world" 

1196
2017-07-20 15:51



Tôi thích giải pháp này gây ra nó giống như Ruby, và Ruby là ngọt ngào! :) Tôi thấp hơn trường hợp tất cả các chữ cái khác của chuỗi để nó hoạt động chính xác như Ruby: return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase(); - ma11hew28
Trong thế giới sau Prototype.js này, nó không được đề xuất để thay đổi hoặc mở rộng các đối tượng gốc. - Ryan
@rxgx - Các "không mở rộng" boogeyman bây giờ bắt đầu chết (cảm ơn thần), và mọi người đang kéo đầu của họ ra khỏi jSand và nhận ra nó chỉ là một tính năng ngôn ngữ. Chỉ vì Prototype.js mở rộng Object trong một thời gian ngắn, không có nghĩa là mở rộng Natives là xấu. Bạn không nên làm điều đó nếu bạn đang viết mã cho một người tiêu dùng không xác định (giống như một tập lệnh phân tích mà đi trên các trang web ngẫu nhiên), nhưng khác hơn là nó tốt. - csuwldcat
@csuwldcat Điều gì sẽ xảy ra nếu một thư viện khác mà bạn đang sử dụng thêm cách viết hoa của chính nó mà bạn không biết? Mở rộng nguyên mẫu là hình thức xấu bất kể Prototype.js đã làm nó hay chưa. Với ES6, bản chất sẽ cho phép bạn ăn bánh và ăn nó. Tôi nghĩ rằng bạn có thể bối rối "boogeyman" chết cho những người tạo ra shims tuân thủ thông số ECMASCRIPT. Những shims là hoàn toàn tốt đẹp bởi vì một thư viện mà thêm một shim sẽ thực hiện nó trong cùng một cách. Tuy nhiên, bạn nên tránh thêm nội tại không phải của mình. - Justin Meyer
Mở rộng người bản xứ là thực hành không tốt. Ngay cả khi bạn nói "oh tôi sẽ không bao giờ sử dụng mã này với bất kỳ thứ gì khác", bạn (hoặc người khác) có thể sẽ. Sau đó, họ sẽ dành ba ngày cố gắng để tìm ra một số lỗi toán học lạ vì ai đó mở rộng Number.money () để đối phó với tiền tệ hơi khác với thư viện khác của bạn đã làm. Nghiêm túc, tôi đã nhìn thấy điều này xảy ra tại một công ty lớn và nó không có giá trị thời gian của bất cứ ai gỡ lỗi để tìm ra một thư viện dev sai lầm với các nguyên mẫu người bản địa. - phreakhead


Trong CSS:

p:first-letter {
    text-transform:capitalize;
}

408
2017-07-17 14:06



OP đang yêu cầu một giải pháp JS. - Antonio Max
$ ('# mystring_id'). văn bản (chuỗi) .css ('text-transform', 'capitalize'); - DonMB
Ngoài ra, điều này chỉ ảnh hưởng đến việc hiển thị chuỗi - không phải giá trị thực. Nếu nó ở dạng, ví dụ: giá trị vẫn sẽ được gửi dưới dạng. - dmansfield
Đây là không phải là câu trả lời cho câu hỏi!!! Đây là một giải pháp CSS cho một câu hỏi JS. Downvote. SO là về câu trả lời chính xác, chỉ vì bạn tìm thấy "một giải pháp" không làm cho nó "giải pháp đúng", và điều này là waaaay tắt nhãn hiệu. - dudewad
Điều này sẽ không hoạt động trong các ngữ cảnh javascript không có hiển thị DOM / CSS (như Node.js). Nó thực sự trả lời câu hỏi "làm thế nào để tôi trình bày chữ cái đầu tiên như thể nó là chữ hoa trong một trình duyệt web trong khi để lại chuỗi javascript ban đầu không thay đổi gì?" - jinglesthula


Dưới đây là một phiên bản rút gọn của câu trả lời phổ biến nhận được chữ cái đầu tiên bằng cách xử lý chuỗi dưới dạng mảng:

function capitalize(s)
{
    return s[0].toUpperCase() + s.slice(1);
}

Cập nhật:

Theo các ý kiến ​​dưới đây, điều này không hoạt động trong IE 7 trở xuống.

Cập nhật 2:

Tránh undefined cho chuỗi rỗng (xem Nhận xét của @ njzk2 bên dưới), bạn có thể kiểm tra chuỗi trống:

function capitalize(s)
{
    return s && s[0].toUpperCase() + s.slice(1);
}

235
2017-08-28 23:03



Điều này sẽ không hoạt động trong IE <8, vì các trình duyệt đó không hỗ trợ lập chỉ mục chuỗi. IE8 tự hỗ trợ nó, nhưng chỉ cho các chuỗi ký tự - không phải cho các đối tượng chuỗi. - Mathias Bynens
Số liệu IE sẽ khóc ... - joelvh
những người quan tâm, thị trường IE7 là ít hơn 5%! và đó có lẽ là máy cũ của gremma và grempa của bạn. Tôi nói ngắn mã FTW! - vsync
@vsync gremma của bạn và grempa có thể có rất nhiều tiền họ sẵn sàng chi tiêu trên trang web của tôi ... - joshuahedlund
@ vsync Tôi chỉ có nghĩa là tùy thuộc vào nhân khẩu học người dùng của bạn, đôi khi (mặc dù biết ơn ít hơn và ít hơn khi chúng tôi vượt qua năm 2014 và hơn thế nữa) nó có lợi nhuận để hỗ trợ các trình duyệt cũ như IE7 ... - joshuahedlund


Nếu bạn quan tâm đến hiệu suất của một vài phương pháp khác nhau được đăng:

Dưới đây là các phương pháp nhanh nhất dựa trên kiểm tra jsperf này (đặt hàng từ nhanh nhất đến chậm nhất).

Như bạn có thể thấy, hai phương pháp đầu tiên về cơ bản có thể so sánh về hiệu suất, trong khi thay đổi String.prototype đến nay là chậm nhất về hiệu suất.

// 10,889,187 operations/sec
function capitalizeFirstLetter(string) {
    return string[0].toUpperCase() + string.slice(1);
}

// 10,875,535 operations/sec
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

// 4,632,536 operations/sec
function capitalizeFirstLetter(string) {
    return string.replace(/^./, string[0].toUpperCase());
}

// 1,977,828 operations/sec
String.prototype.capitalizeFirstLetter = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

enter image description here


135
2017-11-14 03:26



Có vẻ như mã khởi tạo không tạo ra sự khác biệt: jsperf.com/capitalize-first-letter-of-string/2 - user420667
Một lý do nữa không để mở rộng nguyên mẫu. - cchamberlain
O_o ... Tại sao quá tệ với nguyên mẫu? - mvlabat
Cũng lưu ý, thay thế .slice(1) với .substr(1) sẽ nâng cao hiệu suất hơn nữa. - Przemek


Đối với trường hợp khác, tôi cần nó để viết hoa chữ cái đầu tiên và viết hoa chữ thường. Các trường hợp sau đã khiến tôi thay đổi chức năng này:

//es5
function capitalize(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
capitalize("alfredo")  // => "Alfredo"
capitalize("Alejandro")// => "Alejandro
capitalize("ALBERTO")  // => "Alberto"
capitalize("ArMaNdO")  // => "Armando"

// es6 using destructuring 
const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();

129
2017-07-19 18:17



"... nhưng không thay đổi trường hợp của bất kỳ chữ cái nào khác". Đây không phải là câu trả lời đúng cho câu hỏi mà OP hỏi. - Carlos Muñoz
@ CarlosMuñoz nếu bạn đọc câu mở đầu, ông nói điều này là cho một trường hợp khác nhau. - TMH
@TomHart Đó chính xác là lý do tại sao nó không phải là một giải pháp cho câu hỏi. Nó phải là một bình luận hoặc một câu hỏi và câu trả lời khác - Carlos Muñoz
Tôi đồng ý với bạn về điều đó, nhưng tôi có thể thấy rất nhiều người kết thúc ở đây tìm cách để làm những gì câu trả lời này. - TMH


Dưới đây là các giải pháp tốt nhất:

Giải pháp đầu tiên Trong CSS:

p {
  text-transform: capitalize;
}

Giải pháp thứ hai :

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}

Bạn cũng có thể thêm nó vào String.prototype để bạn có thể kết hợp nó với các phương pháp khác:

String.prototype.capitalizeFirstLetter = function() {
    return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();
}

và sử dụng nó như thế này:

'string'.capitalizeFirstLetter() // String

Giải pháp thứ ba:

function ucFirstAllWords( str )
{
    var pieces = str.split(" ");
    for ( var i = 0; i < pieces.length; i++ )
    {
        var j = pieces[i].charAt(0).toUpperCase();
        pieces[i] = j + pieces[i].substr(1).toLowerCase();
    }
    return pieces.join(" ");
}

107
2018-02-16 05:30



tôi đã tìm thấy string.replace(string[0], string[0].toUpperCase()); dễ dàng hơn nhiều - Gcap
Chỉ cần một đầu lên - với giải pháp CSS nhân vật viết hoa không thể được lựa chọn trực quan trong Chrome trên Ubuntu (có lẽ các trình duyệt khác quá) trong khi lựa chọn văn bản. Nó vẫn được chọn và văn bản được sao chép nếu bạn nhấn Ctrl + C. - Andris
Giải pháp thứ hai, như bạn đã viết nó, làm cho phần còn lại của chuỗi chữ thường. Việc xóa nội dung đó sẽ gần với yêu cầu ban đầu hơn. ("Tháp Eiffel" giữ cách viết hoa trên E và T) - Ward D.S.
1) Sử dụng ký hiệu hai dấu hai chấm ::first-letter vì biến thể này phù hợp với triết lý CSS3 khi nói đến các dấu hai chấm đó, 2) sử dụng .substring(…) thay vì .slice(…) vì nó có hiệu suất tốt hơn, 3) OP không muốn viết thường tất cả các ký tự khác, 4) Không sửa đổi nguyên mẫu của các đối tượng bạn không sở hữu - Przemek
Bạn đang hạ thấp các chữ cái khác, câu trả lời này Là sai rồi. - fpg1503


var string = "hello world";
string = string.charAt(0).toUpperCase() + string.slice(1);
alert(string);

62
2017-07-17 06:23





Viết hoa chữ cái đầu tiên của tất cả các từ trong một chuỗi:

function ucFirstAllWords( str )
{
    var pieces = str.split(" ");
    for ( var i = 0; i < pieces.length; i++ )
    {
        var j = pieces[i].charAt(0).toUpperCase();
        pieces[i] = j + pieces[i].substr(1);
    }
    return pieces.join(" ");
}

58
2017-11-30 17:16



Đọc lại câu hỏi: Tôi muốn viết hoa ký tự đầu tiên của chuỗi, nhưng không thay đổi trường hợp của bất kỳ chữ cái nào khác. - JimmyPena
Tôi biết tôi làm được. Tôi muốn thêm một điều, trong trường hợp toàn bộ chuỗi bắt đầu viết hoa: phần [i] = j + pieces [i] .substr (1). ToLowerCase (); - Malovich
Một giải pháp cho trường hợp này: function capitaliseFirstLetters (s) {return s.split ("") .map (function (w) {return w.charAt (0) .toUpperCase () + w.substr (1)}). ("")} Có thể là một lớp lót đẹp nếu nó không được đưa vào một hàm. - Luke Channings
Sẽ tốt hơn để viết hoa toàn bộ chuỗi đầu tiên - Magico
Khác với chức năng này không trả lời câu hỏi, nó thực sự cũng quá phức tạp. s => s.split(' ').map(x => x[0].toUpperCase() + x.slice(1)).join(' ') - OverCoder


Chúng tôi có thể có được nhân vật đầu tiên với một trong những yêu thích của tôi RegExp, trông giống như một nụ cười dễ thương: /^./

String.prototype.capitalize = function () {
  return this.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

Và đối với tất cả những người nghiện cà phê:

String::capitalize = ->
  @replace /^./, (match) ->
    match.toUpperCase()

... và cho tất cả những người nghĩ rằng có một cách tốt hơn để làm điều này, mà không cần mở rộng nguyên mẫu gốc:

var capitalize = function (input) {
  return input.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

44
2018-02-15 06:55



Có một cách tốt hơn để làm điều này mà không cần sửa đổi nguyên mẫu String. - David Kennedy
@ davidkennedy85 Chắc chắn! Nhưng đây là cách đơn giản, không phải tốt đường... ;-) - yckart