Skip to content

Strings

js
import { 
camelCase
,
kebabCase
,
pascalCase
} from '@studiometa/js-toolkit-v4/utils';

Case

Function'foo bar'
lowerCase(s)'foo bar'
upperCase(s)'FOO BAR'
capitalize(s)'Foo bar'
pascalCase(s)'FooBar'
camelCase(s)'fooBar'
kebabCase(s)'foo-bar'
snakeCase(s)'foo_bar'
js
import { 
camelCase
,
kebabCase
,
pascalCase
} from '@studiometa/js-toolkit-v4/utils';
pascalCase
('drag-threshold'); // 'DragThreshold'
camelCase
('drag-threshold'); // 'dragThreshold'
kebabCase
('dragThreshold'); // 'drag-threshold'

The four converters are memoised

pascalCase, camelCase, kebabCase and snakeCase are memo-wrapped, because the framework converts the same names on every option read and every handler resolution. lowerCase, upperCase and capitalize are not — they are single-pass and there is nothing to cache.

These are the functions the framework itself uses: kebabCase turns dragThreshold into data-option-drag-threshold, and pascalCase turns an option name into optionDragThresholdChanged.

Leading and trailing characters

FunctionDoes
withLeadingCharacters(s, chars)adds them if absent
withoutLeadingCharacters(s, chars)removes them once
withoutLeadingCharactersRecursive(s, chars)removes them as long as they are there
withTrailingCharacters(s, chars)adds them if absent
withoutTrailingCharacters(s, chars)removes them once
withoutTrailingCharactersRecursive(s, chars)removes them as long as they are there
js
import {
  
withLeadingCharacters
,
withoutTrailingCharactersRecursive
,
} from '@studiometa/js-toolkit-v4/utils';
withLeadingCharacters
('bar', 'foo'); // 'foobar'
withLeadingCharacters
('foobar', 'foo'); // 'foobar' — already there
withoutTrailingCharactersRecursive
('path///', '/'); // 'path'

The recursive pair exists because a URL joined from parts collects separators, and removing one is not the same as removing them all.

Slashes

The four named cases, for the one separator every path uses:

js
import {
  
withLeadingSlash
,
withoutLeadingSlash
,
withoutTrailingSlash
,
withTrailingSlash
,
} from '@studiometa/js-toolkit-v4/utils';
withLeadingSlash
('about'); // '/about'
withoutLeadingSlash
('/about'); // 'about'
withTrailingSlash
('/about'); // '/about/'
withoutTrailingSlash
('/about/'); // '/about'

Each is the *Characters function with '/' filled in, which is what makes a call site readable at a glance.

MIT Licensed