Caixa do título Lodash (primeira letra maiúscula de cada palavra)

108

Estou examinando os documentos de lodash e outras questões do Stack Overflow - embora existam várias maneiras nativas de JavaScript de realizar essa tarefa , há uma maneira de converter uma string para maiúsculas e minúsculas usando funções puramente lodash (ou pelo menos funções prototípicas existentes) para que eu não precise usar uma expressão regular ou definir uma nova função?

por exemplo

This string ShouLD be ALL in title CASe

Deve se tornar

This String Should Be All In Title Case
brandonscript
fonte
3
você também pode fazer a mesma coisa com HTML, style = "text-transform: capitalize"
Chaudhary,

Respostas:

213

Isso pode ser feito com uma pequena modificação de startCase:

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

4castle
fonte
3
_.startCase("aaa BBB ccc") === "Aaa BBB Ccc"
Brandon
2
Eu gosto disso. Eu não sabia sobre startCase.
Brandon
1
.startCase ("camelString") === "Camel String" but _.startCase ( .toLower ("camelString")) === "Camelstring" parece que a lodash precisa de um método titleCase
aristidesfl
4
Eu gosto disso, no entanto, remove caracteres como :, isso é um problema.
JabberwockyDecompiler
1
Não funciona para primeiros nomes com sotaque (o espanhol "Martínez Cortés Peña" passa a ser "Martinez Cortes Pena") ou com hífens (o francês "Jean-Louis" passa a ser "Jean Louis"). O mesmo vale para quaisquer funções de "* Caso" de lodash
Flo
42
_.startCase(_.camelCase(str))

Para texto não gerado pelo usuário, trata mais casos do que a resposta aceita

> 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'
Aristidesfl
fonte
27

com lodash versão 4.

_.upperFirst(_.toLower(str))

James Nguyen
fonte
3
Este é melhor do que startCaseporque pode lidar com mais letras do que az, por exemplo å, ä e ö.
Lars Nyström
3
upperFirst só mudará o primeiro caractere da primeira palavra, não para as palavras subsequentes. Não acredito que seja melhor do que startCase por esse motivo específico.
Raghavan
15
'This string ShouLD be ALL in title CASe'
  .split(' ')
  .map(_.capitalize)
  .join(' ');
CD..
fonte
1
Definitivamente o mais conciso. Obviamente, ainda requer a divisão em um array, mas essa ainda é a solução mais curta e doce pelo que posso dizer. Além disso, de acordo com o problema 1528 que @AlexandreThebaldi indicou, provavelmente deveria usar em upperFirstvez de capitalize.
brandonscript
... mas _.startCase definitivamente vence :)
brandonscript
5
_.startCaseremove pontuação. O exemplo _.startCase('first second etc...retorna a stringFirst Second Etc
LuckyStarr
Este foi melhor para o meu caso de uso como startCaseconverte tudo para um espaço em branco, por exemplo, user_nameserá User Name, e eu só queria User_namecomo a text-transform: capitalizepropriedade de CSS
gonzarodriguezt
7

Existem respostas mistas para esta pergunta. Alguns estão recomendando o uso, _.upperFirstenquanto outros recomendam _.startCase.

Saiba a diferença entre eles.

i) _.upperFirstirá transformar a primeira letra da sua string, então a string pode ser de uma única palavra ou várias palavras, mas a única primeira letra da sua string é transformada em maiúsculas.

_.upperFirst('jon doe')

resultado:

Jon doe

verifique a documentação https://lodash.com/docs/4.17.10#upperFirst

ii) _.startCaseirá transformar a primeira letra de cada palavra dentro de sua string.

_.startCase('jon doe')

resultado:

Jon Doe

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

Vishal Shetty
fonte
Sim, mas e quanto a strings com maiúsculas e minúsculas? Nenhum desses fará 'jOn DoE' em 'Jon Doe' sem _.lower().
brandonscript de
3

Esta é uma maneira de usar APENAS métodos lodash e nenhum método embutido:

_.reduce(_.map(_.split("Hello everyOne IN the WOrld", " "), _.capitalize), (a, b) => a + " " + b)
Brandon
fonte
1
const titleCase = str =>
  str
    .split(' ')
    .map(str => {
      const word = str.toLowerCase()
      return word.charAt(0).toUpperCase() + word.slice(1)
    })
    .join(' ')

Você também pode dividir a função do mapa para fazer palavras separadas

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

A menos que eu não tenha percebido, o lodash não tem seus próprios métodos de letras maiúsculas e minúsculas.

agmcleod
fonte
@vbotio parece _.upperFirstsó se aplica ao primeiro caractere (um sinônimo de _.capitalize()?)
brandonscript
1
capitalizee upperFirstfazer coisas diferentes.
Brandon
_.capitalize aplica-se a toda a string
vbotio
0

Não tão conciso quanto a resposta de @ 4castle, mas descritivo e cheio de lodash, no entanto ...

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>

marcelino
fonte
Eu acho que o detalhamento e a extensão da resposta a tornam quase indesejável. Eu não votei negativamente, mas não seria minha primeira escolha.
brandonscript
0

Aqui está outra solução para meu caso de uso: "espinha dorsal do diabo"

Simplesmente:

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

Usar startCase removeria o apóstrofo, então eu tive que contornar essa limitação. As outras soluções pareciam bastante complicadas. Eu gosto disso porque é limpo, fácil de entender.

Albertpeiro
fonte
0

Isso pode ser feito apenas com lodash

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

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

console.log(proper);
//would return 'Make This Sentence Propercase'
Justin Brown
fonte
Você precisa exigir letras maiúsculas e palavras de lodash.
Justin Brown de
Sim, mas você não está chamando as funções do lodash; a menos que você os tenha de alguma formavar words = ._words
brandonscript
0

O código abaixo funcionará perfeitamente:

var str = "TITLECASE";
_.startCase(str.toLowerCase());
Tarun Majumder
fonte
-3

com o lodash 4, você pode usar _.capitalize ()

_.capitalize('JOHN') Retorna 'John'

Consulte https://lodash.com/docs/4.17.5#capitalize para obter detalhes

LI Zhuoran
fonte
Seria bom testar o caso de uso para uma frase de palavras. Suspeite que isso não coloque todas as primeiras letras de cada palavra em maiúscula.
brandonscript
Na verdade, 'a frase' produz 'A frase'
Andres Zapata,