# \`String.prototype.toCamelCase()\` and others

**URL:** <https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064>\
**Category:** 💡 Ideas\
**Tags:** proposal\
**Created:** [October 30, 2021, 5:35pm UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064 "2021-10-30T17:35:28Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![parzhitsky](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/parzhitsky/32/1090_2.png) [@parzhitsky](https://es.discourse.group/u/parzhitsky)\
**Post date:** [October 30, 2021, 5:35pm UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064/1 "2021-10-30T17:35:28Z")

</div>

Converting strings to other cases (including "camelCase", "PascalCase", "snake\_case", etc.) is a fairly common task, – yet I haven't found any case-related proposals, neither in [tc39/proposals GitHub repo](https://github.com/tc39/proposals), nor here (probably because there are countless npm libraries to do this conversion?).

So, basically, the proposal is trivial: for some cases (to be discussed), adding case-related methods to primitive strings and string instances, – I can think of several of those (the identifiers are also not set in stone):

```javascript
const string = "hello world";

string.toCamelCase(); // "helloWorld"
string.toPascalCase(); // "HelloWorld"
string.toKebabCase(); // "hello-world"
string.toSnakeCase(); // "hello_world"
string.toConstantCase(); // "HELLO_WORLD"
string.toTitleCase(); // "Hello World"

```

Or (to avoid using arbitrary namings, such as "kebab" or "snake") this can be a single function, a-la `Intl` API, – but to me, this seems a bit over the top. If such a function is okay though, putting it statically on the `String` constructor might be a good choice too:

```javascript
String.prototype.toCase(params);

```

```javascript
String.toCase(string[, params]);

```

```javascript
const string = "what a lovely day";

string.toCase();
// "what a lovely day"

string.toCase({ match: "n + 1", separator: "", pattern: "Aa*" }); // camelCase
// "whatALovelyDay"

string.toCase({ match: "n", separator: "_", pattern: "A*"}); // CONSTANT_CASE
// "WHAT_A_LOVELY_DAY"

string.toCase({ match: "n", separator: " ", pattern: "A*" }); // Title Case
// "What A Lovely Day"

string.toCase({ match: "n", separator: " ", pattern: "(Aa)*" });
// "WhAt A LoVeLy DaY"

string.toCase(
  { match: "1 - n", separator: "@", pattern: "a*" }, // first and second words
  { match: "n + 2", separator: "-", pattern: "A*" }, // third and subsequent words
);
// "what@a LOVELY-DAY"

```

I'm a bit uncertain about how this would work with punctuation, whitespace characters, and other non-word characters, but I guess this can be derived from how `.toLowerCase()` and `.toUpperCase()` work?

---

<div class="post-metadata">

**Author:** ![DiriectorDoc](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/diriectordoc/32/987_2.png) [@DiriectorDoc](https://es.discourse.group/u/DiriectorDoc)\
**Post date:** [October 31, 2021, 5:14am UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064/2 "2021-10-31T05:14:48Z")

</div>

This seems like a niche issue. In what situation would you need to convert a _string_ to camel-case, or any other case besides upper/lower? I've never come across a scenario where I needed to do that. And even if I did, it wouldn't be too hard to MacGyver a function from scratch to do just that.

---

<div class="post-metadata">

**Author:** ![kaizhu256](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/kaizhu256/32/342_2.png) [@kaizhu256](https://es.discourse.group/u/kaizhu256)\
**Post date:** [October 31, 2021, 6:51pm UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064/3 "2021-10-31T18:51:30Z")

</div>

this could be mildly useful when message-passing property-names between javascript (camelCase) and python / sql / filesystems (snake\_case):

```javascript
let dataJs = {
    responseText: "hello world",
    statusCode: 200
};

// convert property names from camelCase -> snake_case
// for message-passing compatibility between js <-> python api-endpoints
let dataPython = {};
Object.entries(dataJs).forEach(function ([
    key, val
]) {
    dataPython[key.toSnakeCase()] = val;
});
// dataPython = {"response_text": "hello world", "status_code": 200}

await fetch("https://python_api_server.com/api1", {
    body: JSON.stringify(dataPython)
});

```

---

<div class="post-metadata">

**Author:** ![tabatkins](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/tabatkins/32/170_2.png) [@tabatkins](https://es.discourse.group/u/tabatkins)\
**Post date:** [October 31, 2021, 7:06pm UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064/4 "2021-10-31T19:06:38Z")

</div>

Or just within the web platform:

- translating between CSS property names (kebab-cased, like `flex-grow`) to the js version of them on the style object (camel-cased, like `flexGrow`)
- translating between HTML data-\* attribute names (kebab-cased, like `data-foo-bar`) and the properties on the dataset object (camel-cased, like `el.dataset.fooBar`)

---

<div class="post-metadata">

**Author:** ![ljharb](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/ljharb/32/8_2.png) [@ljharb](https://es.discourse.group/u/ljharb)\
**Post date:** [October 31, 2021, 7:35pm UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064/5 "2021-10-31T19:35:29Z")

</div>

Wouldn’t it be easier and more greppable/debuggable for the web to add aliases under the proper casing?

---

<div class="post-metadata">

**Author:** ![parzhitsky](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/parzhitsky/32/1090_2.png) [@parzhitsky](https://es.discourse.group/u/parzhitsky)\
**Post date:** [October 31, 2021, 7:38pm UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064/6 "2021-10-31T19:38:23Z")

</div>

To me, this question pops up pretty often during:

- CI/CD pipeline configurations (e.g., when creating a feature environment based on the name of the feature branch);
- cloud config (e.g., when creating an ID of an AWS lambda based on the name of a function).

---

<div class="post-metadata">

**Author:** ![parzhitsky](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/parzhitsky/32/1090_2.png) [@parzhitsky](https://es.discourse.group/u/parzhitsky)\
**Post date:** [October 31, 2021, 7:40pm UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064/7 "2021-10-31T19:40:45Z")

</div>

Could you add an example?

---

<div class="post-metadata">

**Author:** ![ljharb](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/ljharb/32/8_2.png) [@ljharb](https://es.discourse.group/u/ljharb)\
**Post date:** [October 31, 2021, 8:58pm UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064/8 "2021-10-31T20:58:35Z")

</div>

The example is in what I'm replying to:

> translating between HTML data-\* attribute names (kebab-cased, like `data-foo-bar`) and the properties on the dataset object (camel-cased, like `el.dataset.fooBar`)

In other words, why not a `el.dataset['foo-bar']` getter/setter alongside the `fooBar` one?

---

<div class="post-metadata">

**Author:** ![claudiameadows](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/claudiameadows/32/126_2.png) [@claudiameadows](https://es.discourse.group/u/claudiameadows)\
**Post date:** [November 8, 2021, 5:38am UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064/9 "2021-11-08T05:38:03Z")

</div>

I'm extremely in favor of this, at least from the context of CSS, but of course further discussion on that is obviously off-topic here.

---

<div class="post-metadata">

**Author:** ![graphemecluster](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/graphemecluster/32/957_2.png) [@graphemecluster](https://es.discourse.group/u/graphemecluster)\
**Post date:** [November 12, 2021, 5:23pm UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064/10 "2021-11-12T17:23:39Z")

</div>

Perhaps we need a `capitalize` method first – `string[0].toUpperCase() + string.slice(1)` is verbose.

---

<div class="post-metadata">

**Author:** ![Destrox](https://avatars.discourse-cdn.com/v4/letter/d/5e9695/32.png) [@Destrox](https://es.discourse.group/u/Destrox)\
**Post date:** [March 14, 2022, 5:28pm UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064/11 "2022-03-14T17:28:59Z")

</div>

.toTitleCase is Very Useful.  
I think to create proposal like this, but here is :)

I find this:

String.prototype.toTitle = function () {  
return this.toLowerCase().replace(/(^|\s)\S/g, function (char) {  
return char.toUpperCase();  
});  
};

IMO this is required in all languages, with this we have opportunity to create good looking Title on submitting form

---

<div class="post-metadata">

**Author:** ![ljharb](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/ljharb/32/8_2.png) [@ljharb](https://es.discourse.group/u/ljharb)\
**Post date:** [March 14, 2022, 5:49pm UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064/12 "2022-03-14T17:49:09Z")

</div>

What would `toTitle` do with other languages? what about initialisms? `"All About HTTP".toTitle()` should not ever become `"All About Http"`, for example.

---

<div class="post-metadata">

**Author:** ![Destrox](https://avatars.discourse-cdn.com/v4/letter/d/5e9695/32.png) [@Destrox](https://es.discourse.group/u/Destrox)\
**Post date:** [March 14, 2022, 6:38pm UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064/13 "2022-03-14T18:38:48Z")

</div>

Ok, that's true, but on python running like my toTitle:

 ![image](https://global.discourse-cdn.com/free1/uploads/es/original/2X/d/df73fae051825db799f48eec20023ab8328e15f3.png)

We can reformat this, for uppercase only first letter from every word

---

<div class="post-metadata">

**Author:** ![theScottyJam](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/thescottyjam/32/616_2.png) [@theScottyJam](https://es.discourse.group/u/theScottyJam)\
**Post date:** [March 14, 2022, 8:43pm UTC](https://es.discourse.group/t/string-prototype-tocamelcase-and-others/1064/14 "2022-03-14T20:43:52Z")

</div>

> [@Destrox](#):
>
> We can reformat this, for uppercase only first letter from every word

But, that wouldn't work well on strings like "hI tHeRe".

I think this sort of brings us back to "What is the concrete use case for this"? If the use case is "I have some text that might not be in the correct casing, but I want to put it in the title", perhaps a good question would be to ask why it's not in the correct casing. Properly casing a document title sounds like something that should be done by humans, not dumb algorithms. If, instead, the use case had something to do with translating the casing of JSON properties, to help facility communication with languages who follow different default casing standards, well, that provides a niche use-case for converting to camel-case and snake-case, but it doesn't help with the title-case scenario, so we still don't have a strong argument for it.