Caso del título de Lodash (primera letra mayúscula de cada palabra)

108

Estoy revisando los documentos de lodash y otras preguntas de Stack Overflow; si bien hay varias formas nativas de JavaScript para realizar esta tarea , ¿hay alguna manera de convertir una cadena en un título usando funciones puramente lodash (o al menos funciones prototípicas existentes) para no tener que usar una expresión regular o definir una nueva función?

p.ej

This string ShouLD be ALL in title CASe

debe convertirse

This String Should Be All In Title Case
brandonscript
fuente
3
también puede hacer lo mismo desde HTML, style = "text-transform: capitalize"
Chaudhary

Respuestas:

214

Esto se puede hacer con una pequeña modificación de startCase:

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

4 castillo
fuente
3
_.startCase("aaa BBB ccc") === "Aaa BBB Ccc"
Brandon
2
Me gusta. Yo no sabía startCase.
Brandon
1
.startCase ("camelString") === "Camel String" pero _.startCase ( .toLower ("camelString")) === "Camelstring" parece que lodash necesita un método titleCase
aristidesfl
4
Me gusta esto, sin embargo, elimina caracteres como :, eso es un problema.
JabberwockyDecompiler
1
No funciona para nombres con acento (el español "Martínez Cortés Peña" se convierte en "Martínez Cortes Pena") o con guiones (el francés "Jean-Louis" se convierte en "Jean Louis"). Lo mismo ocurre con cualquier función "* Case" de lodash
Flo
42
_.startCase(_.camelCase(str))

Para texto no generado por el usuario, esto maneja más casos que la respuesta aceptada

> 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
fuente
27

con lodash versión 4.

_.upperFirst(_.toLower(str))

James Nguyen
fuente
3
Este es mejor startCaseporque puede manejar más letras que az, por ejemplo å, ä y ö.
Lars Nyström
3
upperFirst solo cambiará el primer carácter de la primera palabra, no las siguientes. No creo que esto sea mejor que startCase por esta razón en particular.
Raghavan
15
'This string ShouLD be ALL in title CASe'
  .split(' ')
  .map(_.capitalize)
  .join(' ');
DISCOS COMPACTOS..
fuente
1
Definitivamente el más conciso, me gusta. Obviamente, todavía requiere dividirse en una matriz, pero esa sigue siendo la solución más corta y dulce por lo que puedo decir. Además, según el número 1528 que indicó @AlexandreThebaldi, probablemente debería usar en upperFirstlugar de capitalize.
brandonscript
... pero _.startCase definitivamente gana :)
brandonscript
5
_.startCaseelimina la puntuación. El ejemplo _.startCase('first second etc...devuelve la cadenaFirst Second Etc
LuckyStarr
Esto era mejor para mi caso de uso como startCasetodo lo convierte en un blanco, por ejemplo, user_nameserá User Name, y yo sólo quería User_namecomo la text-transform: capitalizepropiedad de CSS
gonzarodriguezt
7

Hay respuestas mixtas a esta pregunta. Algunos recomiendan su uso _.upperFirstmientras que otros recomiendan _.startCase.

Conoce la diferencia entre ellos.

i) _.upperFirsttransformará la primera letra de su cadena, luego la cadena puede ser de una sola palabra o varias palabras, pero la única primera letra de su cadena se transforma a mayúsculas.

_.upperFirst('jon doe')

salida:

Jon doe

consulte la documentación https://lodash.com/docs/4.17.10#upperFirst

ii) _.startCasetransformará la primera letra de cada palabra dentro de su cadena.

_.startCase('jon doe')

salida:

Jon Doe

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

Vishal Shetty
fuente
Sí, pero ¿qué pasa con las cadenas de mayúsculas y minúsculas mixtas? Ninguno de estos convertirá a 'jOn DoE' en 'Jon Doe' sin él _.lower().
brandonscript
3

Aquí hay una forma de usar ÚNICAMENTE métodos lodash y no métodos incorporados:

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

También puede dividir la función de mapa para hacer palabras separadas

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

A menos que me lo perdiera, lodash no tiene sus propios métodos de minúsculas / mayúsculas.

agmcleod
fuente
@vbotio ve como _.upperFirstsólo se aplica al primer carácter (sinónimo de _.capitalize()?)
brandonscript
1
capitalizey upperFirsthacer cosas diferentes.
Brandon
_.capitalize se aplica a toda la cadena
vbotio
0

No tan conciso como la respuesta de @ 4castle, pero descriptiva y lodash-full, sin embargo ...

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
fuente
Supongo que la verbosidad y la longitud de la respuesta la hacen casi indeseable. No voté en contra, pero no sería mi primera opción.
brandonscript
0

Aquí hay otra solución para mi caso de uso: "columna vertebral del diablo"

Simplemente:

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

El uso de startCase eliminaría el apóstrofo, así que tuve que solucionar esa limitación. Las otras soluciones parecían bastante complicadas. Me gusta esto porque es limpio y fácil de entender.

albertpeiro
fuente
0

Esto se puede hacer solo con 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
fuente
Necesita requerir mayúsculas y palabras de lodash.
Justin Brown
Sí, pero no está llamando a las funciones desde lodash; a menos que los haya un alias de alguna maneravar words = ._words
brandonscript
0

El siguiente código funcionará perfectamente:

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

con lodash 4, puede usar _.capitalize ()

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

Consulte https://lodash.com/docs/4.17.5#capitalize para obtener más detalles

LI Zhuoran
fuente
Sería bueno probar el caso de uso para una oración de palabras. Sospeche que esto no escribe en mayúscula todas las primeras letras de cada palabra.
brandonscript
De hecho, 'la oración' produce 'La oración'
Andrés Zapata