String helpers for Ember. Extracted from the great DockYard's ember-composable-helpers.
Warning
If you are using single file components you most likely do not need this addon as it's just a wrapper on @ember/string methods. You can import most methods directly from @ember/string in your components, or migrate to something like change-case.
- Ember.js v3.28 or above
- Ember CLI v4.4 or above
- Node.js v20 or above
ember install ember-cli-string-helpersCamelizes a string using Ember.String.camelize.
import { camelize } from 'ember-cli-string-helpers';
<template>
{{camelize "hello jim bob"}}
{{camelize stringWithDashes}}
</template>Output: helloJimBob
Capitalizes a string using Ember.String.capitalize.
import { capitalize } from 'ember-cli-string-helpers';
<template>
{{capitalize "hello jim bob"}}
{{capitalize fullName}}
</template>Output: Hello jim bob
Classifies a string using Ember.String.classify.
import { classify } from 'ember-cli-string-helpers';
<template>
{{classify "hello jim bob"}}
{{classify stringWithDashes}}
</template>Output: HelloJimBob
Dasherizes a string using Ember.String.dasherize.
Output: whats-that
Mark a string as safe for unescaped output with Ember templates using Ember.String.htmlSafe.
import { htmlSafe } from 'ember-cli-string-helpers';
<template>
{{htmlSafe "<div>someString</div>"}}
{{htmlSafe unsafeString}}
</template>Removes dashes and underscores from a string, capitalizes the first letter and makes the rest of the string lower case.
import { humanize } from 'ember-cli-string-helpers';
<template>
{{humanize "some-string"}}
{{humanize phrase}}
</template>Output: Some string
Lowercases a string.
import { lowercase } from 'ember-cli-string-helpers';
<template>
{{lowercase "People Person's Paper People"}}
{{lowercase phrase}}
</template>Output: people person's paper people
Capitalizes every word separated by a white space or a dash.
import { titleize } from 'ember-cli-string-helpers';
<template>
{{titleize "my big fat greek wedding"}}
{{titleize phrase}}
</template>Output: My Big Fat Greek Wedding
Trim a string.
import { trim } from 'ember-cli-string-helpers';
<template>
{{trim " Lorem ipsum dolor sit amet, consectetur adipiscing elit. "}}
{{trim phrase}}
</template>Output: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Truncates a string with a characterLimit and optionally adds an ellipsis to the end.
import { truncate } from 'ember-cli-string-helpers';
<template>
{{truncate "Lorem ipsum dolor sit amet, consectetur adipiscing elit." 20 true}}
{{truncate phrase characterLimit useEllipsis}}
</template>Output: Lorem ipsum dolor...
Underscores a string using Ember.String.underscore.
import { underscore } from 'ember-cli-string-helpers';
<template>
{{underscore "whatsThat"}}
{{underscore phrase}}
</template>Output: whats_that
Uppercases a string.
import { uppercase } from 'ember-cli-string-helpers';
<template>
{{uppercase "loud noises"}}
{{uppercase phrase}}
</template>Output: LOUD NOISES
Splits a string on whitespace and/or turns multiple words into an array.
import { w } from 'ember-cli-string-helpers';
<template>
{{#each (w "First" "Second" "Last") as |rank|}}
Our {{rank}} place winner is ...
{{/each}}
</template>or:
import { w } from 'ember-cli-string-helpers';
<template>
{{#each (w "First Second Last") as |rank|}}
Our {{rank}} place winner is ...
{{/each}}
</template>See also: Ember w documentation
If you are using Glint and environment-ember-loose, you can add all the helpers to your app at once by adding
import type EmberCliStringHelpersRegistry from 'ember-cli-string-helpers/template-registry';to your app's e.g. types/glint.d.ts file, and making sure your registry extends from EmberCliStringHelpersRegistry:
declare module '@glint/environment-ember-loose/registry' {
export default interface Registry
extends EmberCliStringHelpersRegistry {
// ...
}
}import { camelize } from 'ember-cli-string-helpers';
<template>
{{camelize "hello jim bob"}}
</template>This project is licensed under the MIT License.
