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다른 코드가 동일한 이름 / 브라우저를 사용하는 경우 충돌을 일으킬 수 있음) 나중에 같은 이름의 기본 함수를 추가합니다).

... 그리고 국제화를 고려할 때이 질문에 훨씬 더 많은 것이 있습니다. 이 놀라운 대답 (아래에 묻혀 있음)이 보여줍니다.

코드 단위 대신 유니 코드 코드 포인트로 작업하려는 경우 (예 : 기본 다국어 평면 외부에서 유니 코드 문자를 처리하는 경우) String#[@iterator]코드 포인트와 작동 하는 사실을 활용할 수 있으며 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();

이것은 2018 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'

첫 번째 대문자의 바닐라 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 또는 소호 - 대쉬 의 underscore.string 라이브러리는 투자를 포함한 문자열 확장을 제공합니다 :

_.capitalize (string) 문자열의 첫 글자를 대문자로 변환합니다.

예:

_.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"

FUN 전용 2016 년 11 월 (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화살표 함수 라고 합니다 .
• OP는 전체 문자열의 첫 번째 문자를 대문자로하는 코드를 요청하지 않았지만 첫 번째 문자 (문자 인 경우 물론)를 요구했기 때문에 이름 capitalizeFirstChar대신 으로 이름 capitalizeFirstLetter을 바꿨습니다.
• constcapitalizeFirstChar프로그래머로서 항상 의도를 명시 적으로 명시해야하기 때문에 상수 로 선언 할 수 있습니다.
• 내가 수행 한 벤치 마크에서 string.charAt(0)와 사이에는 큰 차이가 없었습니다 string[0]. 그러나 참고 string[0]가 될 undefined것로 다시 작성해야하므로, 빈 문자열에 대한 string && string[0]대안에 비해 너무 장황하다.
• string.substring(1)보다 빠릅니다 string.slice(1).

기준

• 이 솔루션의 경우 4,956,962 ops / s ± 3.03 %,
• 가장 많이 투표 된 답변에 대해 4,577,946 ops / s ± 1.2 %
• Chrome 57에서 JSBench.me로 작성되었습니다 .

replace 로 구현하는 매우 간단한 방법이 있습니다. 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 코드 단위는 U + 0 ~ U + D7FF 및 U + E000 ~ U + FFFF 포함의 두 범위 내에서 USV 코드 포인트가있는 1 : 1입니다. 대부분의 경우 문자는이 두 범위에 속하지만 전부는 아닙니다.

ES2015부터는 이것을 다루는 것이 약간 쉬워졌습니다. String.prototype[@@iterator]코드 포인트 **에 해당하는 문자열을 생성합니다. 예를 들어 다음과 같이 할 수 있습니다.

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

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

더 긴 문자열의 경우, 아마도 그렇게 효율적이지 않을 것입니다. *** 우리는 실제로 나머지를 반복 할 필요가 없습니다. 우리는 String.prototype.codePointAt첫 번째 (가능한) 편지를 얻는 데 사용할 수 있지만 여전히 슬라이스 시작 위치를 결정해야합니다. 나머지를 반복하지 않는 한 가지 방법은 첫 번째 코드 포인트가 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에는 코드 포인트 작업을위한 내장 메소드가 없으므로 첫 번째 코드 단위가 대리 ****인지 수동으로 테스트해야합니다.

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("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

처음에는 국제화 고려 사항도 언급했습니다. 이들 중 일부는 무엇에 대한 지식뿐만 아니라 지식이 필요하기 때문에 설명하기가 매우 어렵습니다 언어를 사용하고, 그러나 또한 언어로 단어의 구체적인 지식을 필요로 할 수있다. 예를 들어, 아일랜드어 "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.

ES2018에 도입 된 RegExp에서 유니 코드 속성 문자 클래스를 지원하는 에이전트에서 관심있는 문자를 직접 표현하여 정리할 수 있습니다.

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

이것은 상당히 좋은 정확도로 문자열에서 여러 단어를 대문자로 처리하도록 약간 조정될 수 있습니다. CWU또는 Changes_When_Uppercased 문자 속성은 물론, 변화 대문자로 모든 코드 포인트와 일치합니다. 예를 들어 Dutch ij 와 같은 제목이있는 digraph 문자를 사용하여이 작업을 시도 할 수 있습니다 .

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

작성 당시 (2020 년 2 월) Firefox / Spidermonkey는 지난 2 년 동안 소개 된 RegExp 기능을 아직 구현하지 않았습니다 *****. Kangax compat 테이블 에서이 기능의 현재 상태를 확인할 수 있습니다 . Babel은 해당 패턴이없는 동등한 패턴에 대한 속성 참조가있는 RegExp 리터럴을 컴파일 할 수 있지만 결과 코드는 엄청날 수 있습니다.

아마이 질문을하는 사람들은 Deseret 대문자 또는 국제화에 관심이 없을 것입니다. 그러나 현재 문제가되지 않더라도 결국에는 문제가 발생할 가능성이 높기 때문에 이러한 문제를 알고있는 것이 좋습니다. 그것들은“가장자리”가 아니고 오히려 정의가 명확한 경우 가 아닙니다 . 대부분의 사람들이 터키어를 사용하는 나라가 있습니다. 어쨌든 코드 단위가있는 코드 단위를 묶는 것은 상당히 일반적인 버그의 원인입니다 (특히 이모티콘과 관련하여). 문자열과 언어는 매우 복잡합니다!

* UTF-16 / UCS2의 코드 단위는 또한 U + D800이 기술적으로 코드 포인트라는 점에서 유니 코드 코드 포인트입니다. 그러나 이것이 "의미"한 것은 아닙니다. 흐린. 그러나 대리자가 확실히 아닌 것은 USV (유니 코드 스칼라 값)입니다.

** 대리 코드 단위가 "분리 된"(즉, 논리 쌍의 일부가 아닌) 경우에도 여전히 대리자를 얻을 수 있습니다.

*** 아마도. 나는 그것을 테스트하지 않았습니다. 대문자 사용이 의미있는 병목 현상이 아니라면 땀을 흘리지 않을 것입니다. 가장 명확하고 읽기 쉬운 항목을 선택하십시오.

**** 이러한 함수는 첫 번째 단위가 분리 된 대리 일 가능성이 있기 때문에 첫 번째 코드 대신 첫 번째 코드 단위와 두 번째 코드 단위를 모두 테스트하려고 할 수 있습니다. 예를 들어 입력 "\ uD800x"는 X를 그대로 대문자로 표시하므로 예상되거나 예상되지 않을 수 있습니다.

***** 진행 상황을 더 직접적으로 따르고 싶다면 Bugzilla 문제 가 있습니다.

CSS를 사용하여 이러한 종류의 물건을 처리하는 것이 좋습니다 . 일반적으로 CSS를 사용하여 무언가를 해결할 수 있다면 먼저 시도한 다음 JavaScript를 사용하여 문제를 해결하십시오.이 경우 :first-letterCSS에서 사용 하고 적용하십시오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'

반복해서 재사용하려면 자바 스크립트 네이티브 문자열에 첨부하는 것이 좋습니다.

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.toUpperCase () 를 호출 하여 firstLetter 를 대문자 로 만들고 str.substr (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);
}

설명을 해주셔서 감사합니다.

이렇게 한 줄로 할 수 있습니다

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

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

이 화살표 기능이 가장 쉽다는 것을 알았습니다. 바꾸기 는 \w문자열 의 첫 문자 ( ) 와 일치하여 대문자로 변환합니다. 더 멋진 것은 필요하지 않습니다.