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


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


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'

27

con lodash versión 4.

_.upperFirst(_.toLower(str))


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

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


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)

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


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.


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


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.


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'

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.