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


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


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'

27

com lodash versão 4.

_.upperFirst(_.toLower(str))


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

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


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)

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


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.


@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>


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.


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'

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.