Casse du titre Lodash (première lettre majuscule de chaque mot)

109

Je regarde à travers la documentation de lodash et d'autres questions de Stack Overflow - bien qu'il existe plusieurs façons natives de JavaScript d'accomplir cette tâche , y a-t-il un moyen de convertir une chaîne en cas de titre en utilisant des fonctions purement lodash (ou du moins des fonctions prototypiques existantes) pour ne pas avoir à utiliser une expression régulière ou à définir une nouvelle fonction?

par exemple

This string ShouLD be ALL in title CASe

devrait devenir

This String Should Be All In Title Case
brandonscript
la source
3
vous pouvez faire la même chose depuis HTML aussi, style = "text-transform: capitalize"
Chaudhary

Réponses:

216

Cela peut être fait avec une petite modification de startCase:

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

4château
la source
3
_.startCase("aaa BBB ccc") === "Aaa BBB Ccc"
Brandon
2
Je l'aime. Je ne savais pas startCase.
Brandon
1
.startCase ("camelString") === "Camel String" mais _.startCase ( .toLower ("camelString")) === "Camelstring" semble que lodash a besoin d'une méthode
titleCase
4
J'aime cela, cependant, cela supprime des caractères tels que :, c'est un problème.
JabberwockyDecompiler
1
Il ne fonctionne pas pour les prénoms avec accent (l'espagnol "Martínez Cortés Peña" devient "Martinez Cortes Pena") ou avec des tirets (le français "Jean-Louis" devient "Jean Louis"). Il en va de même pour toutes les fonctions "* Case" de lodash
Flo
43
_.startCase(_.camelCase(str))

Pour le texte non généré par l'utilisateur, cela gère plus de cas que la réponse acceptée

> 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
la source
27

avec la version lodash 4.

_.upperFirst(_.toLower(str))

James Nguyen
la source
3
Celui-ci est meilleur que startCaseparce qu'il peut gérer plus de lettres que az, par exemple å, ä et ö.
Lars Nyström
3
upperFirst ne changera que le premier caractère du premier mot, pas pour les mots suivants. Je ne pense pas que ce soit mieux que startCase pour cette raison particulière.
Raghavan
15
'This string ShouLD be ALL in title CASe'
  .split(' ')
  .map(_.capitalize)
  .join(' ');
CD..
la source
1
Certainement le plus concis, comme ça. De toute évidence, il faut encore se diviser en un tableau, mais c'est toujours la solution la plus courte et la plus douce d'après ce que je peux dire. De plus, selon le numéro 1528 indiqué par @AlexandreThebaldi, devrait probablement utiliser à la upperFirstplace de capitalize.
brandonscript
... mais _.startCase gagne définitivement :)
brandonscript
5
_.startCasesupprime la ponctuation. L'exemple _.startCase('first second etc...renvoie la chaîneFirst Second Etc
LuckyStarr
Ce fut mieux pour mon cas d'utilisation comme startCaseconvertit tout à un vide par exemple user_namesera User Name, et je voulais seulement User_namecomme la text-transform: capitalizepropriété de CSS
gonzarodriguezt
7

Les réponses à cette question sont mitigées. Certains recommandent d'utiliser _.upperFirsttandis que certains recommandent _.startCase.

Connaissez la différence entre eux.

i) _.upperFirsttransformera la première lettre de votre chaîne, alors la chaîne peut être composée d'un seul mot ou de plusieurs mots mais la seule première lettre de votre chaîne est transformée en majuscule.

_.upperFirst('jon doe')

production:

Jon doe

consultez la documentation https://lodash.com/docs/4.17.10#upperFirst

ii) _.startCasetransformera la première lettre de chaque mot à l'intérieur de votre chaîne.

_.startCase('jon doe')

production:

Jon Doe

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

Vishal Shetty
la source
Oui, mais qu'en est-il des chaînes à casse mixte? Ni l'un ni l'autre ne feront de «jOn DoE» un «Jon Doe» sans _.lower().
brandonscript le
3

Voici un moyen d'utiliser UNIQUEMENT les méthodes lodash et aucune méthode intégrée:

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

Vous pouvez également diviser la fonction de carte pour faire des mots séparés

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

Sauf si je l'ai manqué, lodash n'a pas ses propres méthodes minuscules / majuscules.

agmcléod
la source
@vbotio semble _.upperFirstne s'applique qu'au premier caractère (un synonyme de _.capitalize()?)
brandonscript
1
capitalizeet upperFirstfaire des choses différentes.
Brandon
_.capitalize s'applique à toute la chaîne
vbotio
0

Pas aussi concise que la réponse de @ 4castle, mais descriptive et pleine de lodash, néanmoins ...

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
la source
Je suppose que la verbosité et la longueur de la réponse la rendent presque indésirable. Je n'ai pas voté contre, mais ce ne serait pas mon premier choix.
brandonscript
0

Voici une autre solution pour mon cas d'utilisation: "l'épine dorsale du diable"

Simplement:

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

L'utilisation de startCase supprimerait l'apostrophe, j'ai donc dû contourner cette limitation. Les autres solutions semblaient assez alambiquées. J'aime ça car c'est propre, facile à comprendre.

Albertpeiro
la source
0

Cela peut être fait avec seulement du 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
la source
Vous devez exiger des majuscules et des mots de lodash.
Justin Brown
Oui, mais vous n'appelez pas les fonctions de lodash; sauf si vous les avez aliasés d'une manière ou d'une autrevar words = ._words
brandonscript
0

Le code ci-dessous fonctionnera parfaitement:

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

avec lodash 4, vous pouvez utiliser _.capitalize ()

_.capitalize('JOHN') Il renvoie 'John'

Voir https://lodash.com/docs/4.17.5#capitalize pour plus de détails

LI Zhuoran
la source
Ce serait bien de tester le cas d'utilisation d'une phrase de mots. Suspectez que cela ne met pas en majuscule toutes les premières lettres de chaque mot.
brandonscript
En effet, `` la phrase '' produit `` La phrase ''
Andres Zapata