string 이클립스 - JavaScript에서 문자열의 첫 문자를 대문자로 만들려면 어떻게합니까?




소문자 첫번째 (25)

게시 된 몇 가지 다른 메소드의 성능에 관심이있는 경우 :

다음은 이 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);
}

어떻게 문자열의 첫 글자를 대문자로 만들지 만 다른 글자의 대문자는 바꾸지 않습니까?

예 :

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

대문자로 된 텍스트를 다시 포맷하려면 다른 예제를 다음과 같이 수정해야합니다.

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'

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만의 Nov.2016 업데이트 (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

then capitalize("hello") // Hello


lodash 이미 사용하고 있거나 고려 중이 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);
}

에서 CoffeeScript 문자열에 대한 프로토 타입에 추가 :

String::capitalize = ->
  @substr(0, 1).toUpperCase() + @substr(1)

사용법은 다음과 같습니다.

"woobie".capitalize()

어느 결과 :

"Woobie"

그것은 CSS에서 쉬워 보인다 :

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

이것은 CSS text-transform 속성 ( W3Schools )에서 가져온 것입니다.


문자열의 모든 단어의 첫 글자를 대문자로 표기하십시오.

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

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

보다 객체 지향적 인 접근 :

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

그리고:

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

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

다음은 최상의 솔루션입니다.

CSS의 첫 번째 해결책 :

p {
  text-transform: capitalize;
}

두 번째 해결책 :

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

String.prototype 추가하여 다른 메소드와 연결할 수도 있습니다.

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

다음과 같이 사용하십시오.

'string'.capitalizeFirstLetter() // String

세 번째 해결책 :

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

이것이 2018 ES6 + 솔루션입니다 .

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


CSS 만

p::first-letter {
  text-transform: uppercase;
}
  • ::first-letter 라고 불리지 만 첫 번째 문자에 적용됩니다. 즉, 문자열 %a 의 경우이 선택자는 % 적용되며 대문자로 변환되지 않습니다.
  • IE9 + 또는 IE5.5 +에서는 단 하나의 콜론 ( :first-letter ) 만있는 레거시 표기법에서 지원됩니다.

ES2015 한 줄 짜기

원래의 문제를 효율적으로 해결할 수있는 ES2015에는 여러 가지 답변이 없으므로 다음과 같은 내용을 생각해 냈습니다.

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

비고

  • parameters => function화살표 함수 라고 합니다 .
  • OP는 capitalizeFirstChar 대신 capitalizeFirstChar 라는 이름을 사용했습니다. OP는 전체 문자열에서 첫 번째 문자를 대문자로 사용하는 코드를 요구하지 않았으므로 문자의 첫 문자는 대문자로 표기했습니다.
  • constcapitalizeFirstChar 를 상수로 선언 할 수있는 능력을 제공합니다. 프로그래머가 항상 명시 적으로 의도를 명시해야하기 때문에 필요합니다.
  • 내가 수행 한 벤치 마크에서 string.charAt(0)string[0] 사이에는 큰 차이가 없었습니다. 그러나 string[0] 은 빈 문자열에 대해서는 undefined 되어 있지 않으므로 string && string[0] 으로 다시 작성해야합니다. 이는 너무 길기 때문에 대안과 비교할 수 있습니다.
  • string.substring(1)string.substring(1) 보다 빠릅니다.

기준

  • 이 용액의 경우 4,956,962 ops / s ± 3.03 %
  • 가장 많은 투표 응답에 대해 4,577,946 회의 / s ± 1.2 %.
  • Google 크롬 57에서 JSBench.me 생성되었습니다.


CSS를 사용하여 무언가를 해결할 수 있다면 먼저 CSS를 사용하여 이러한 종류의 물건을 다루는 것이 더 좋습니다. 먼저 문제를 해결하기 위해 JavaScript를 시도해보십시오.이 경우에는 CSS의 :first-letter 를 사용하고 적용하십시오. text-transform:capitalize;

그래서 그것을 위해 클래스를 생성 해보십시오. 예를 들어, .first-letter-uppercase.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'

반복해서 재사용하고 싶다면 자바 스크립트 원시 문자열에 연결하는 것이 좋습니다. 다음과 같이합니다.

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'

이런 식으로 한 줄에서 할 수 있습니다.

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

ucfirst 함수는 이렇게하면 작동합니다.

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

감사합니다.


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

일부 다른 답변은 String.prototype (이 대답도 마찬가지로 사용됨)을 수정하지만, 유지 보수성 때문에이 문제에 대해 조언합니다 ( prototype 함수가 추가되는 위치를 찾기가 어렵고 다른 코드가 동일한 코드를 사용하면 충돌을 일으킬 수 있음). 이름 / 브라우저는 앞으로 같은 이름의 네이티브 함수를 추가합니다).


다른 경우에는 첫 글자를 대문자로 바꾸고 나머지는 소문자로 사용해야합니다. 다음과 같은 경우에이 기능을 변경할 수 있습니다.

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

다음은 문자열을 배열로 처리하여 첫 번째 문자를 얻는 일반적인 대답의 단축 버전입니다.

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

가장 좋아하는 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 = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);

underscore.js 또는 Lo-Dash 를 사용하는 경우 underscore.string 라이브러리는 capitalize를 비롯한 문자열 확장을 제공합니다.

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

예:

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

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

(함수에 캡슐화하거나 자주 사용하는 경우 String 프로토 타입에 추가 할 수도 있습니다.)


하나의 요소에 대해 onClick 이벤트에 많은 함수를 추가 할 수 있습니다. false 마지막으로 발사 될 것이라는 것을 어떻게 확신 할 수 있습니까? 반면에 preventDefault 는 요소의 기본 동작 만 방지합니다.







javascript string capitalize letter