ฉันจะสร้างตัวอักษรตัวแรกของสตริงตัวพิมพ์ใหญ่ใน JavaScript ได้อย่างไร

ฉันจะสร้างตัวอักษรตัวแรกของสตริงตัวพิมพ์ใหญ่ได้อย่างไร แต่จะไม่เปลี่ยนตัวพิมพ์ของตัวอักษรอื่น

ตัวอย่างเช่น:

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

ทางออกพื้นฐานคือ:

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

console.log(capitalizeFirstLetter('foo')); // Foo

บางคำตอบอื่น ๆ แก้ไขString.prototype(คำตอบนี้เคยเป็นเช่นกัน) แต่ฉันจะแนะนำในขณะนี้เนื่องจากการบำรุงรักษา (ยากที่จะหาที่ฟังก์ชันจะถูกเพิ่มในprototypeและอาจทำให้เกิดความขัดแย้งหากรหัสอื่นใช้ชื่อเดียวกัน / เบราว์เซอร์ เพิ่มฟังก์ชั่นพื้นเมืองที่มีชื่อเดียวกันในอนาคต)

... และจากนั้นมีคำถามมากมายเมื่อคุณพิจารณาความเป็นสากลเพราะนี่คือคำตอบที่ดีอย่างน่าอัศจรรย์ (ฝังอยู่ด้านล่าง) แสดงให้เห็น

หากคุณต้องการทำงานกับ Unicode code points แทนที่จะเป็น code units (ตัวอย่างเช่นเพื่อจัดการกับอักขระ Unicode นอก Basic Multilingual Plane) คุณสามารถใช้ประโยชน์จากข้อเท็จจริงที่ใช้String#[@iterator]งานได้กับ code points และคุณสามารถใช้toLocaleUpperCaseเพื่อให้ได้ตัวพิมพ์ใหญ่ที่ถูกต้อง:

function capitalizeFirstLetter([ first, ...rest ], locale = navigator.language) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

console.log(capitalizeFirstLetter('foo')); // Foo
console.log(capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉")); // "𐐎𐐲𐑌𐐼𐐲𐑉" (correct!)
console.log(capitalizeFirstLetter("italya", 'tr')); // İtalya" (correct in Turkish Latin!)

สำหรับตัวเลือกเป็นสากลมากยิ่งขึ้นโปรดดูคำตอบเดิมด้านล่าง

นี่คือวิธีการเชิงวัตถุเพิ่มเติม:

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

คุณจะเรียกใช้ฟังก์ชันเช่นนี้:

"hello world".capitalize();

ด้วยผลลัพธ์ที่คาดว่าจะเป็น:

"Hello world" 

ใน CSS:

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

ต่อไปนี้เป็นคำตอบที่ได้รับความนิยมฉบับย่อที่ได้รับตัวอักษรตัวแรกโดยถือสตริงเป็นอาร์เรย์

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

ปรับปรุง:

ตามความคิดเห็นด้านล่างนี้ไม่ทำงานใน IE 7 หรือด้านล่าง

อัปเดต 2:

หากต้องการหลีกเลี่ยงundefinedสตริงว่าง (ดูความคิดเห็นของ @ njzk2 ด้านล่าง ) คุณสามารถตรวจสอบสตริงว่างได้:

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

หากคุณสนใจประสิทธิภาพของวิธีการต่าง ๆ ที่โพสต์:

ต่อไปนี้เป็นวิธีที่เร็วที่สุดตามการทดสอบ jsperf นี้ (เรียงลำดับจากเร็วที่สุดไปช้าที่สุด)

อย่างที่คุณเห็นวิธีการสองวิธีแรกนั้นเทียบเคียงได้กับประสิทธิภาพในขณะที่การเปลี่ยนแปลงString.prototypeนั้นช้าที่สุดในแง่ของประสิทธิภาพ

// 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);
}

สำหรับกรณีอื่นฉันต้องการใช้ตัวอักษรตัวแรกและพิมพ์เล็กที่เหลือ กรณีต่อไปนี้ทำให้ฉันเปลี่ยนฟังก์ชั่นนี้:

//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();

นี่คือโซลูชั่น 201CM ECMAScript 6+ :

const str = 'the Eiffel Tower';
const newStr = `${str[0].toUpperCase()}${str.slice(1)}`;
console.log('Original String:', str); // the Eiffel Tower
console.log('New String:', newStr); // The Eiffel Tower

หากคุณกำลังใช้ (หรือกำลังพิจารณาอยู่) lodashการแก้ปัญหานั้นง่าย:

_.upperFirst('fred');
// => 'Fred'

_.upperFirst('FRED');
// => 'FRED'

_.capitalize('fred') //=> 'Fred'

ดูเอกสารของพวกเขา: https://lodash.com/docs#capitalize

_.camelCase('Foo Bar'); //=> 'fooBar'

https://lodash.com/docs/4.15.0#camelCase

_.lowerFirst('Fred');
// => 'fred'

_.lowerFirst('FRED');
// => 'fRED'

_.snakeCase('Foo Bar');
// => 'foo_bar'

Vanilla js สำหรับตัวพิมพ์ใหญ่ตัวแรก:

function upperCaseFirst(str){
    return str.charAt(0).toUpperCase() + str.substring(1);
}

ใช้อักษรตัวแรกของทุกคำในสตริงเป็นตัวพิมพ์ใหญ่:

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

เราสามารถรับตัวละครตัวแรกด้วยหนึ่งในตัวโปรดของฉันRegExpดูเหมือนว่าน่ารักยิ้ม:/^./

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

และสำหรับคนชอบดื่มกาแฟทุกคน:

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

... และสำหรับทุกคนที่คิดว่ามีวิธีที่ดีกว่าในการทำเช่นนี้โดยไม่ต้องขยายต้นแบบดั้งเดิม:

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

ใช้:

var str = "ruby java";

console.log(str.charAt(0).toUpperCase() + str.substring(1));

มันจะส่งออก"Ruby java"ไปยังคอนโซล

ถ้าคุณใช้underscore.jsหรือLo-Dashที่underscore.stringห้องสมุดให้ส่วนขยายสตริงรวมทั้งการใช้ประโยชน์:

_.capitalize (สตริง) แปลงอักษรตัวแรกของสตริงเป็นตัวพิมพ์ใหญ่

ตัวอย่าง:

_.capitalize("foo bar") == "Foo bar"

String.prototype.capitalize = function(allWords) {
   return (allWords) ? // if all words
      this.split(' ').map(word => word.capitalize()).join(' ') : //break down phrase to words then  recursive calls until capitalizing all words
      this.charAt(0).toUpperCase() + this.slice(1); // if allWords is undefined , capitalize only the first word , mean the first char of the whole string
}

แล้ว:

 "capitalize just the first word".capitalize(); ==> "Capitalize just the first word"
 "capitalize all words".capitalize(true); ==> "Capitalize All Words"

อัพเดท พ.ย. 2559 (ES6) เพียงเพื่อความสนุก:

const capitalize = (string = '') => [...string].map(    //convert to array with each item is a char of string by using spread operator (...)
    (char, index) => index ? char : char.toUpperCase()  // index true means not equal 0 , so (!index) is the first char which is capitalized by `toUpperCase()` method
 ).join('')                                             //return back to string

แล้วก็ capitalize("hello") // Hello

สั้นที่สุด 3 โซลูชั่นที่ 1 และ 2 กรณีจับเมื่อsสตริง"", nullและundefined:

 s&&s[0].toUpperCase()+s.slice(1)        // 32 char

 s&&s.replace(/./,s[0].toUpperCase())    // 36 char - using regexp

'foo'.replace(/./,x=>x.toUpperCase())    // 31 char - direct on string, ES6

let s='foo bar';

console.log( s&&s[0].toUpperCase()+s.slice(1) );

console.log( s&&s.replace(/./,s[0].toUpperCase()) );

console.log( 'foo bar'.replace(/./,x=>x.toUpperCase()) );

CSS เท่านั้น

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

• แม้จะถูกเรียก::first-letterใช้มันจะใช้กับอักขระตัวแรกเช่นในกรณีของสตริง%aตัวเลือกนี้จะนำไปใช้กับ%และaจะไม่เป็นตัวพิมพ์ใหญ่
• ใน IE9 + หรือ IE5.5 + ได้รับการสนับสนุนในรูปแบบดั้งเดิมที่มีเครื่องหมายโคลอนเดียวเท่านั้น ( :first-letter)

ES2015 หนึ่งซับ

เนื่องจากมีคำตอบมากมาย แต่ไม่มีใน ES2015 ที่จะแก้ปัญหาเดิมได้อย่างมีประสิทธิภาพฉันจึงคิดสิ่งต่อไปนี้:

const capitalizeFirstChar = str => str.charAt(0).toUpperCase() + str.substring(1);

หมายเหตุ

• parameters => functionจึงเรียกว่าลูกศรฟังก์ชั่น
• ฉันใช้ชื่อcapitalizeFirstCharแทนcapitalizeFirstLetterเพราะ OP ไม่ได้ขอรหัสที่ใช้อักษรตัวใหญ่ในสตริงทั้งหมด แต่เป็นอักขระตัวแรก (ถ้าเป็นตัวอักษรแน่นอน)
• constทำให้เรามีความสามารถในการประกาศcapitalizeFirstCharเป็นค่าคงที่ซึ่งเป็นที่ต้องการตั้งแต่ในฐานะโปรแกรมเมอร์คุณควรระบุความตั้งใจของคุณไว้อย่างชัดเจนเสมอ
• ในเกณฑ์มาตรฐานที่ฉันแสดงไม่มีความแตกต่างอย่างมีนัยสำคัญระหว่างstring.charAt(0)และstring[0]และอย่างไรก็ตามโปรดทราบว่าstring[0]จะเป็นundefinedสตริงว่างดังนั้นจึงควรเขียนใหม่string && string[0]ซึ่งเป็นวิธี verbose มากเกินไปเมื่อเทียบกับทางเลือก
• string.substring(1)string.slice(1)จะเร็วกว่า

เกณฑ์มาตรฐาน

• 4,956,962 ops / s ± 3.03% สำหรับโซลูชันนี้
• 4,577,946 ops / s ± 1.2% สำหรับคำตอบที่ได้รับการโหวตมากที่สุด
• สร้างด้วยJSBench.meบน Google Chrome 57

มีวิธีที่ง่ายมากที่จะใช้มันโดยเป็นแทน สำหรับ ECMAScript 6:

'foo'.replace(/^./, str => str.toUpperCase())

ผลลัพธ์:

'Foo'

ดูเหมือนว่าจะง่ายขึ้นใน CSS:

<style type="text/css">
    p.capitalize {text-transform:capitalize;}
</style>
<p class="capitalize">This is some text.</p>

นี่คือจากคุณสมบัติการแปลงข้อความ CSS (ที่W3Schools )

var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);

ฉันไม่เห็นคำตอบใด ๆ ในคำตอบที่มีอยู่ของประเด็นที่เกี่ยวข้องกับรหัสระนาบคล้ายดาวหรือการทำให้เป็นสากล “ ตัวพิมพ์ใหญ่” ไม่ได้หมายถึงสิ่งเดียวกันในทุกภาษาโดยใช้สคริปต์ที่กำหนด

ตอนแรกฉันไม่เห็นคำตอบใด ๆ เกี่ยวกับประเด็นที่เกี่ยวข้องกับรหัสระนาบคล้ายดาว มีอยู่หนึ่งอัน แต่มันก็ถูกฝังอยู่เล็กน้อย (เช่นนี้ฉันเดาได้!)

ฟังก์ชั่นที่เสนอส่วนใหญ่มีลักษณะดังนี้:

function capitalizeFirstLetter(str) {
  return str[0].toUpperCase() + str.slice(1);
}

อย่างไรก็ตามตัวละครบางตัวอยู่นอก BMP (ระนาบหลายภาษาพื้นฐานรหัสจุด U + 0 ถึง U + FFFF) ตัวอย่างเช่นใช้ข้อความ Deseret นี้:

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉"); // "𐐶𐐲𐑌𐐼𐐲𐑉"

อักขระตัวแรกที่นี่ไม่สามารถใช้ประโยชน์ได้เนื่องจากคุณสมบัติการจัดทำดัชนีของสตริงไม่สามารถเข้าถึง“ ตัวอักษร” หรือจุดรหัส * พวกเขาเข้าถึงหน่วยรหัส UTF-16 สิ่งนี้เป็นจริงเช่นกันเมื่อมีการตัด - ค่าดัชนีชี้ไปที่หน่วยรหัส

มันเป็นไปได้ว่าหน่วยรหัส UTF-16 เป็น 1: 1 โดยมีรหัส USV อยู่ในสองช่วงคือ U + 0 ถึง U + D7FF และ U + E000 ถึง U + FFFF อักขระที่ใส่ซองส่วนใหญ่อยู่ในช่วงสองช่วงนั้น แต่ไม่ใช่ทั้งหมด

จาก ES2015 เป็นต้นไปการจัดการกับสิ่งนี้กลายเป็นเรื่องง่ายขึ้นเล็กน้อย String.prototype[@@iterator]ให้สตริงที่สอดคล้องกับจุดโค้ด ** ตัวอย่างเช่นเราสามารถทำสิ่งนี้:

function capitalizeFirstLetter([ first, ...rest ]) {
  return [ first.toUpperCase(), ...rest ].join('');
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

สำหรับสตริงที่ยาวกว่านี้อาจไม่ได้มีประสิทธิภาพมากนัก - เราไม่จำเป็นต้องย้ำส่วนที่เหลือ เราสามารถใช้String.prototype.codePointAtเพื่อรับจดหมายฉบับแรก (เป็นไปได้) แต่เรายังต้องพิจารณาว่าส่วนใดควรเริ่มต้น วิธีหนึ่งในการหลีกเลี่ยงการวนซ้ำส่วนที่เหลือคือการทดสอบว่า codepoint ตัวแรกอยู่นอก BMP หรือไม่ ถ้ามันไม่ใช่ชิ้นเริ่มต้นที่ 1 และถ้าเป็นชิ้นเริ่มต้นที่ 2

function capitalizeFirstLetter(str) {
  const firstCP = str.codePointAt(0);
  const index = firstCP > 0xFFFF ? 2 : 1;

  return String.fromCodePoint(firstCP).toUpperCase() + str.slice(index);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

คุณสามารถใช้คณิตศาสตร์ระดับบิตแทนที่> 0xFFFFนั่นได้ แต่มันอาจจะง่ายกว่าที่จะเข้าใจวิธีนี้และอาจบรรลุสิ่งเดียวกัน

นอกจากนี้เรายังสามารถทำให้งานนี้ใน ES5 และด้านล่างโดยใช้ตรรกะนั้นอีกเล็กน้อยหากจำเป็น ไม่มีวิธีที่แท้จริงใน ES5 สำหรับการทำงานกับ codepoints ดังนั้นเราต้องทดสอบด้วยตนเองว่าหน่วยรหัสแรกเป็นตัวแทน ****:

function capitalizeFirstLetter(str) {
  var firstCodeUnit = str[0];

  if (firstCodeUnit < '\uD800' || firstCodeUnit > '\uDFFF') {
    return str[0].toUpperCase() + str.slice(1);
  }

  return str.slice(0, 2).toUpperCase() + str.slice(2);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

ในตอนแรกฉันยังกล่าวถึงข้อควรพิจารณาเกี่ยวกับความเป็นสากล บางส่วนของเหล่านี้เป็นเรื่องยากมากที่จะบัญชีสำหรับเพราะพวกเขาต้องใช้ความรู้ไม่เพียง แต่สิ่งที่ภาษาจะถูกใช้ แต่อาจต้องใช้ความรู้เฉพาะของคำในภาษา ตัวอย่างเช่น Digip ไอริช "mb" ใช้ตัวพิมพ์ใหญ่เป็น "mB" ในตอนต้นของคำ อีกตัวอย่างหนึ่งคือ Eszett เยอรมันไม่เคยเริ่มคำ (afaik) แต่ก็ยังช่วยอธิบายปัญหาได้ ตัวพิมพ์เล็ก eszett ("ß") ใช้อักษรตัวพิมพ์ใหญ่เป็น "SS" แต่ "SS" อาจเป็นตัวพิมพ์เล็กเป็น "ß" หรือ "ss" - คุณจำเป็นต้องมีความรู้ภาษาเยอรมันที่ถูกต้อง!

ตัวอย่างที่มีชื่อเสียงที่สุดของปัญหาประเภทนี้อาจเป็นภาษาตุรกี ในภาษาละตินตุรกีรูปแบบตัวพิมพ์ใหญ่ของ i คือİในขณะที่รูปแบบตัวพิมพ์เล็กของฉันคือı - มันเป็นตัวอักษรสองตัวที่แตกต่างกัน โชคดีที่เรามีวิธีการบัญชีสำหรับสิ่งนี้:

function capitalizeFirstLetter([ first, ...rest ], locale) {
  return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

capitalizeFirstLetter("italy", "en") // "Italy"
capitalizeFirstLetter("italya", "tr") // "İtalya"

ในเบราว์เซอร์แท็กภาษาที่ผู้ใช้ต้องการมากที่สุดจะถูกระบุด้วยnavigator.languageรายการตามลำดับที่ต้องการnavigator.languagesและภาษาขององค์ประกอบ DOM ที่กำหนดสามารถรับได้ (โดยปกติ) พร้อมด้วยObject(element.closest('[lang]')).lang || YOUR_DEFAULT_HEREเอกสารหลายภาษา

ในเอเจนต์ที่สนับสนุนคลาสอักขระคุณสมบัติ Unicode ใน RegExp ซึ่งเปิดตัวใน ES2018 เราสามารถล้างข้อมูลเพิ่มเติมได้โดยแสดงสิ่งที่ตัวละครที่เราสนใจโดยตรง:

function capitalizeFirstLetter(str, locale=navigator.language) {
  return str.replace(/^\p{CWU}/u, char => char.toLocaleUpperCase(locale));
}

สิ่งนี้อาจถูกปรับแต่งเล็กน้อยเพื่อจัดการกับการใช้อักษรตัวพิมพ์ใหญ่หลายคำในสตริงด้วยความแม่นยำที่ค่อนข้างดี กระบวนการCWUหรือการเปลี่ยนแปลงคุณสมบัติของตัวอักษรหรืออักขระ___enhen_Uppercasedตรงกับจุดรหัสทั้งหมดซึ่งก็เปลี่ยนเมื่อตัวพิมพ์ใหญ่ เราสามารถลองใช้ตัวอักษร digraph ที่มีหัวเรื่องเช่นภาษาดัตช์ij :

capitalizeFirstLetter('ijsselmeer'); // "IJsselmeer"

ในช่วงเวลาของการเขียน (ก.พ. 2020) Firefox / Spidermonkey ยังไม่ได้ใช้คุณสมบัติ RegExp ที่แนะนำในช่วงสองปีที่ผ่านมา ***** คุณสามารถตรวจสอบสถานะปัจจุบันของคุณลักษณะนี้ที่โต๊ะ compat Kangax บาเบลสามารถรวบรวมตัวอักษร RegExp ด้วยการอ้างอิงคุณสมบัติไปยังรูปแบบที่เทียบเท่าโดยไม่มีพวกเขา แต่โปรดทราบว่ารหัสผลลัพธ์อาจมีขนาดใหญ่มาก

ในทุกโอกาสคนที่ถามคำถามนี้จะไม่เกี่ยวข้องกับการใช้ตัวพิมพ์ใหญ่หรือการทำให้เป็นสากล แต่ก็เป็นเรื่องดีที่จะต้องตระหนักถึงปัญหาเหล่านี้เพราะมีโอกาสที่ดีที่คุณจะพบพวกเขาในที่สุดแม้ว่าพวกเขาจะไม่กังวล พวกเขาไม่ใช่กรณี "edge" หรือมากกว่านั้นไม่ใช่กรณีแบบ edge -definition - มีทั้งประเทศที่คนส่วนใหญ่พูดภาษาตุรกีอยู่แล้วและการทำให้หน่วยโค้ดกับ codepoints เป็นแหล่งของแมลงที่พบบ่อย (โดยเฉพาะกับ เกี่ยวกับอิโมจิ) ทั้งสตริงและภาษาค่อนข้างซับซ้อน!

* หน่วยรหัสของ UTF-16 / UCS2 นั้นก็เป็น Unicode code points ในแง่ที่ว่าเช่น U + D800 เป็นจุดรหัสทางเทคนิค แต่นั่นไม่ใช่สิ่งที่ "หมายถึง" ที่นี่ ... เรียงลำดับ ... แม้ว่ามันจะสวย เลือน สิ่งที่ตัวแทนจะไม่แน่นอนคือ USVs (ค่าสเกลาร์ Unicode)

** แม้ว่าหน่วยรหัสตัวแทนคือ“ กำพร้า” - กล่าวคือไม่ได้เป็นส่วนหนึ่งของคู่ตรรกะ - คุณยังสามารถรับตัวแทนที่นี่ได้เช่นกัน

*** อาจจะ. ฉันยังไม่ได้ทดสอบ หากคุณไม่ได้พิจารณาว่าการใช้อักษรตัวพิมพ์ใหญ่เป็นคอขวดที่มีความหมายฉันอาจจะไม่เหงื่อออก - เลือกสิ่งที่คุณเชื่อว่าชัดเจนที่สุดและอ่านได้

**** ฟังก์ชั่นดังกล่าวอาจต้องการทดสอบทั้งหน่วยแรกและหน่วยที่สองแทนที่จะเป็นหน่วยแรกเนื่องจากเป็นไปได้ว่าหน่วยแรกเป็นตัวแทนกำพร้า ตัวอย่างเช่นอินพุต "\ uD800x" จะใช้ประโยชน์ X ตามที่เป็นอยู่ซึ่งอาจเป็นหรือไม่คาดหวังก็ได้

***** นี่คือปัญหา Bugzillaหากคุณต้องการติดตามความคืบหน้ามากขึ้นโดยตรง

จะดีกว่าเสมอในการจัดการสิ่งต่าง ๆ เหล่านี้โดยใช้ CSS ก่อนโดยทั่วไปถ้าคุณสามารถแก้ปัญหาโดยใช้ CSS ให้ไปก่อนแล้วลอง JavaScript เพื่อแก้ปัญหาของคุณดังนั้นในกรณีนี้ลองใช้:first-letterใน CSS และใช้text-transform:capitalize;

ดังนั้นลองสร้างคลาสสำหรับสิ่งนั้นเพื่อให้คุณสามารถใช้ได้ทั่วโลกเช่น: .first-letter-uppercaseและเพิ่มสิ่งที่ต้องการด้านล่างใน CSS ของคุณ:

.first-letter-uppercase:first-letter {
    text-transform:capitalize;
}

ตัวเลือกอื่นคือ JavaScript ดังนั้นสิ่งที่ดีที่สุดจะเป็นดังนี้:

function capitalizeTxt(txt) {
  return txt.charAt(0).toUpperCase() + txt.slice(1); //or if you want lowercase the rest txt.slice(1).toLowerCase();
}

และเรียกว่าชอบ:

capitalizeTxt('this is a test'); // return 'This is a test'
capitalizeTxt('the Eiffel Tower'); // return 'The Eiffel Tower'
capitalizeTxt('/index.html');  // return '/index.html'
capitalizeTxt('alireza');  // return 'Alireza'

หากคุณต้องการนำมาใช้ซ้ำแล้วซ้ำอีกมันจะดีกว่าแนบไปกับสตริงพื้นเมือง javascript ดังนั้นสิ่งที่ชอบด้านล่าง:

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

และเรียกมันว่าด้านล่าง:

'this is a test'.capitalizeTxt(); // return 'This is a test'
'the Eiffel Tower'.capitalizeTxt(); // return 'The Eiffel Tower'
'/index.html'.capitalizeTxt();  // return '/index.html'
'alireza'.capitalizeTxt();  // return 'Alireza'

หากคุณต้องการฟอร์แมตข้อความตัวพิมพ์ใหญ่ทั้งหมดคุณอาจต้องการแก้ไขตัวอย่างอื่น ๆ เช่น:

function capitalize (text) {
    return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
}

สิ่งนี้จะทำให้แน่ใจได้ว่าข้อความต่อไปนี้จะเปลี่ยนไป:

TEST => Test
This Is A TeST => This is a test

function capitalize(s) {
    // returns the first letter capitalized + the string from index 1 and out aka. the rest of the string
    return s[0].toUpperCase() + s.substr(1);
}


// examples
capitalize('this is a test');
=> 'This is a test'

capitalize('the Eiffel Tower');
=> 'The Eiffel Tower'

capitalize('/index.html');
=> '/index.html'

นี่คือฟังก์ชั่นที่เรียกว่าucfirst () (สั้นสำหรับ "ตัวพิมพ์ใหญ่ตัวอักษรตัวแรก"):

function ucfirst(str) {
    var firstLetter = str.substr(0, 1);
    return firstLetter.toUpperCase() + str.substr(1);
}

คุณสามารถใช้อักษรตัวพิมพ์ใหญ่สตริงโดยการเรียกucfirst ("some string") - ตัวอย่างเช่น

ucfirst("this is a test") --> "This is a test"

มันทำงานโดยแยกสตริงออกเป็นสองชิ้น ในบรรทัดแรกมันจะดึงfirstLetterจากนั้นในบรรทัดที่สองมันจะพิมพ์ใหญ่firstLetterโดยเรียกfirstLetter.toUpperCase ()และรวมกับส่วนที่เหลือของสตริงซึ่งพบได้โดยการเรียกstr.substr (1)(1)

คุณอาจคิดว่าสิ่งนี้จะล้มเหลวสำหรับสตริงว่างและแน่นอนในภาษาเช่น C คุณจะต้องตอบสนองต่อสิ่งนี้ อย่างไรก็ตามใน JavaScript เมื่อคุณใช้สตริงย่อยของสตริงว่างคุณจะได้รับสตริงว่างกลับมา

String.prototype.capitalize = function(){
    return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase();
    } );
};

การใช้งาน:

capitalizedString = someString.capitalize();

นี่คือสตริงข้อความ => นี่คือสตริงข้อความ

var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);

ชำระเงินโซลูชันนี้:

var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // returns Master 

yourString.replace(/^[a-z]/, function(m){ return m.toUpperCase() });

(คุณอาจแค็ปซูลในฟังก์ชั่นหรือเพิ่มลงในต้นแบบเครื่องสายถ้าคุณใช้บ่อย)

ucfirstฟังก์ชั่นการทำงานถ้าคุณทำเช่นนี้

function ucfirst(str) {
    var firstLetter = str.slice(0,1);
    return firstLetter.toUpperCase() + str.substring(1);
}

ขอบคุณ JP สำหรับการประกาศ

คุณสามารถทำได้ในหนึ่งบรรทัดเช่นนี้

string[0].toUpperCase() + string.substring(1)

yourString.replace(/\w/, c => c.toUpperCase())

ฉันพบฟังก์ชันลูกศรนี้ง่ายที่สุด แทนที่ตรงกับตัวอักษรตัวแรก ( \w) ของสตริงของคุณและแปลงเป็นตัวพิมพ์ใหญ่ ไม่จำเป็นต้องเป็นนักเล่น