Wielkie litery tytułu Lodash (pierwsza wielka litera każdego słowa)


109

Przeglądam dokumentację lodash i inne pytania dotyczące przepełnienia stosu - chociaż istnieje kilka natywnych sposobów wykonywania tego zadania w języku JavaScript , czy istnieje sposób, w jaki mogę przekonwertować ciąg znaków na przypadek tytułu, używając funkcji czysto lodash (lub przynajmniej istniejących funkcji prototypowych) tak, że nie muszę używać wyrażenia regularnego ani definiować nowej funkcji?

na przykład

This string ShouLD be ALL in title CASe

powinno stać się

This String Should Be All In Title Case


3
możesz zrobić to samo z HTML również, style = "text-transform: capitalize"
Chaudhary

Odpowiedzi:


216

Można to zrobić za pomocą niewielkiej modyfikacji startCase:

_.startCase(_.toLower(str));


3
_.startCase("aaa BBB ccc") === "Aaa BBB Ccc"
Brandon

2
Lubię to. Nie wiedziałem o startCase.
Brandon

1
.startCase ("camelString") === "Camel String", ale _.startCase ( .toLower ("camelString")) === "Camelstring" wydaje się, że lodash potrzebuje metody
titleCase

4
Podoba mi się to jednak usuwa znaki takie jak :to jest problem.
JabberwockyDecompiler

1
Nie działa w przypadku imion z akcentem (z hiszpańskiego „Martínez Cortés Peña” zmienia się na „Martinez Cortes Pena”) ani z myślnikami (z francuskiego „Jean-Louis” staje się „Jean Louis”). To samo dotyczy wszystkich funkcji lodash „* Case”
Flo,

43
_.startCase(_.camelCase(str))

W przypadku tekstu nie wygenerowanego przez użytkownika obsługuje to więcej przypadków niż zaakceptowana odpowiedź

> startCase(camelCase('myString'))
'My String'
> startCase(camelCase('my_string'))
'My String'
> startCase(camelCase('MY_STRING'))
'My String'
> startCase(camelCase('my string'))
'My String'
> startCase(camelCase('My string'))
'My String'

27

z lodash w wersji 4.

_.upperFirst(_.toLower(str))


3
Ten jest lepszy niż startCasedlatego, że może obsłużyć więcej liter niż az, na przykład å, ä i ö.
Lars Nyström

3
UpperFirst zmieni tylko pierwszy znak pierwszego słowa, a nie kolejne słowa. Z tego powodu nie uważam, że jest to lepsze niż startCase.
Raghavan

15
'This string ShouLD be ALL in title CASe'
  .split(' ')
  .map(_.capitalize)
  .join(' ');

1
Zdecydowanie najbardziej zwięzłe, jak to. Oczywiście nadal wymaga podziału na tablicę, ale to wciąż najkrótsze i najsłodsze rozwiązanie z tego, co mogę powiedzieć. Ponadto, zgodnie z numerem 1528, który wskazał @AlexandreThebaldi, prawdopodobnie powinien użyć upperFirstzamiast capitalize.
brandonscript

... ale _.startCase zdecydowanie wygrywa :)
brandonscript

5
_.startCaseusuwa znaki interpunkcyjne. Przykład _.startCase('first second etc...zwraca ciągFirst Second Etc
LuckyStarr

To było lepsze dla mojego przypadku użycia jako startCaseprzekształca wszystko, aby wykroju na przykład user_namebędzie User Name, a ja tylko chciałem User_namejak text-transform: capitalizewłaściwości CSS
gonzarodriguezt

7

Odpowiedzi na to pytanie są różne. Niektórzy zalecają używanie, _.upperFirsta inni polecają _.startCase.

Poznaj różnicę między nimi.

i) _.upperFirstprzekształci pierwszą literę ciągu, a następnie łańcuch może składać się z jednego słowa lub wielu słów, ale jedyna pierwsza litera ciągu zostanie przekształcona na wielką.

_.upperFirst('jon doe')

wynik:

Jon doe

sprawdź dokumentację https://lodash.com/docs/4.17.10#upperFirst

ii) _.startCaseprzekształci pierwszą literę każdego słowa w twoim ciągu.

_.startCase('jon doe')

wynik:

Jon Doe

https://lodash.com/docs/4.17.10#startCase


Tak, ale co z mieszanymi ciągami wielkości liter? Żadne z nich nie zmieni „jOn DoE” w „Jon Doe” bez _.lower().
brandonscript

3

Oto sposób korzystania TYLKO z metod lodash i bez wbudowanych metod:

_.reduce(_.map(_.split("Hello everyOne IN the WOrld", " "), _.capitalize), (a, b) => a + " " + b)

1
const titleCase = str =>
  str
    .split(' ')
    .map(str => {
      const word = str.toLowerCase()
      return word.charAt(0).toUpperCase() + word.slice(1)
    })
    .join(' ')

Możesz również podzielić funkcję mapy, aby tworzyć oddzielne słowa


0
 var s = 'This string ShouLD be ALL in title CASe';
 _.map(s.split(' '), (w) => _.capitalize(w.toLowerCase())).join(' ')

O ile tego nie przegapiłem, lodash nie ma własnych metod małych / dużych liter.


Wygląd @vbotio _.upperFirstdotyczy tylko pierwszego znaku (synonim _.capitalize()?)
brandonscript

1
capitalizei upperFirstrób różne rzeczy.
Brandon

_.capitalize dotyczy całego ciągu
vbotio

0

Nie tak zwięzły jak odpowiedź @ 4castle, ale opisowy i pełen lodashu ...

var basicTitleCase = _
    .chain('This string ShouLD be ALL in title CASe')
    .toLower()
    .words()
    .map(_.capitalize)
    .join(' ')
    .value()

console.log('Result:', basicTitleCase)
console.log('Exact Match:' , basicTitleCase === 'This String Should Be All In Title Case')
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>


Domyślam się, że szczegółowość i długość odpowiedzi sprawia, że ​​jest to prawie niepożądane. Nie głosowałem przeciw, ale to nie byłby mój pierwszy wybór.
brandonscript

0

Oto inne rozwiązanie dla mojego przypadku użycia: „kręgosłup diabła”

Po prostu:

function titleCase (str) {
  return _.map(str.split(' '), _.upperFirst).join(' ');
}

Użycie startCase spowodowałoby usunięcie apostrofu, więc musiałem obejść to ograniczenie. Inne rozwiązania wydawały się dość zawiłe. Podoba mi się, ponieważ jest czysty, łatwy do zrozumienia.


0

Można to zrobić tylko z lodash

properCase = string =>
        words(string)
            .map(capitalize)
            .join(' ');

const proper = properCase('make this sentence propercase');

console.log(proper);
//would return 'Make This Sentence Propercase'

Musisz wymagać wielkich liter i słów z lodash.
Justin Brown


Tak, ale nie wywołujesz funkcji z lodash; chyba że jakoś ich aliasowałeśvar words = ._words
brandonscript

0

Poniższy kod będzie działał idealnie:

var str = "TITLECASE";
_.startCase(str.toLowerCase());

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.