Semantic UI
ctrl+k
Enter a search term above to see results...
On This Page
Functions
Examples
String Helpers
String helpers provide utilities for manipulating and formatting strings in templates.
Functions
stringify
Converts a value to JSON string.
Template Syntax
{stringify objectToStringify}Parameters
| Name | Type | Description |
|---|---|---|
| a | any | The value to stringify |
Returns
string - JSON string representation of the input.
Example
<pre>{stringify user}</pre>concat
Concatenates all arguments.
Template Syntax
{concat firstName ' ' lastName}Parameters
| Name | Type | Description |
|---|---|---|
| args | …any | Values to concatenate |
Returns
string - Concatenated string of all arguments.
Example
<h1>Welcome, {concat user.firstName ' ' user.lastName}!</h1>capitalize
Capitalizes the first letter of text.
Template Syntax
{capitalize textToCapitalize}Parameters
| Name | Type | Description |
|---|---|---|
| text | string | The text to capitalize |
Returns
string - The input text with the first letter capitalized.
Example
<p>{capitalize pageTitle}</p>titleCase
Converts text to title case.
Template Syntax
{titleCase textToTitleCase}Parameters
| Name | Type | Description |
|---|---|---|
| text | string | The text to convert |
Returns
string - The input text converted to title case.
Example
<h2>{titleCase article.title}</h2>tokenize
Creates a URL-friendly token from a string.
Template Syntax
{tokenize stringToTokenize}Parameters
| Name | Type | Description |
|---|---|---|
| string | string | The string to tokenize |
Returns
string - A URL-friendly token (e.g., “hello-world”).
Example
<div id="{tokenize sectionTitle}"> <h3>{sectionTitle}</h3></div>truncate
Truncates text to a specified length with optional suffix.
Template Syntax
{truncate textToTruncate maxLength}{truncate textToTruncate maxLength {suffix: '…', wordBoundary: false}}Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | The text to truncate | |
| length | number | Maximum length of the output | |
| options | object | Truncation options |
Options
| Name | Type | Default | Description |
|---|---|---|---|
| suffix | string | ’…’ | Text to append when truncated |
| wordBoundary | boolean | true | Whether to truncate at word boundaries |
Returns
string - The truncated text with suffix if needed.
Example
<p class="summary">{truncate article.content 150}</p><p class="excerpt">{truncate description 50 {suffix: '…'}}</p>escapeHTML
Escapes HTML special characters in a string.
Template Syntax
{escapeHTML stringToEscape}Parameters
| Name | Type | Description |
|---|---|---|
| string | string | The string to escape |
Returns
string - The input string with HTML special characters escaped.
Example
<div title="{escapeHTML userInput}"> {userInput}</div><h3>User Bio</h3><p> {#html escapeHTML bioHTML}</p>lowercase
Converts text to lowercase.
Template Syntax
{lowercase textToConvert}Parameters
| Name | Type | Description |
|---|---|---|
| text | string | The text to convert to lowercase |
Returns
string - The text converted to lowercase.
Example
<p>Email: {lowercase userEmail}</p><p>Username: {lowercase displayName}</p>uppercase
Converts text to uppercase.
Template Syntax
{uppercase textToConvert}Parameters
| Name | Type | Description |
|---|---|---|
| text | string | The text to convert to uppercase |
Returns
string - The text converted to uppercase.
Example
<p>Code: {uppercase productCode}</p><p>Status: {uppercase currentStatus}</p>