Pipe Reference: String Pipes
Pipes used for text manipulation, formatting, and encoding on string values.
This section defines Pipes used for text manipulation, formatting, and encoding on string values. These include:
titleCasesentenceCasecapitalCaselowerCaseupperCaseparseJSONreplacereplaceAlltrimtrimStarttrimEndinsertTextAfterinsertTextBeforepadNumbertoStringstringLengthslicesplitStringmatchescreateRegexencodeURIdecodeURIencodeURIComponentdecodeURIComponentencodeBase64decodeBase64
titleCase
- Usage Syntax:
{{ inputString | titleCase }} - Evaluates to: string
- Description: The titleCase pipe transforms an input string by capitalizing the first letter of each word while keeping the rest of the letters in lowercase.
- Useful for:
- Formatting names, titles, labels, and headings.
- Converts phrases like "hello world" to "Hello World".
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: The transformed string with each word's first character capitalized.
- Example 1: Simple phrase
{{ 'hello world' | titleCase }}- Output: 'Hello World'
- Example 2: Mixed casing input
{{ 'tHis iS a test' | titleCase }}- Output: 'This Is A Test'
- Notes:
- Only affects alphabetic words; punctuation and symbols remain unchanged.
- Converts all non-initial letters in each word to lowercase.
sentenceCase
- Usage Syntax:
{{ inputString | sentenceCase }} - Evaluates to: string
- Description: The sentenceCase pipe transforms the input string by capitalizing only the first letter of the string and making the rest of the characters lowercase.
- Ideal for:
- Formatting paragraphs, sentences, or user-facing messages.
- Converts strings like "hELLO WORLD" to "Hello world".
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: The input string with the first character capitalized and the rest lowercased.
- Example 1: Fully uppercase input
{{ 'HELLO WORLD' | sentenceCase }}- Output: 'Hello world'
- Example 2: Mixed casing
{{ 'tHis Is A tEst. so iS tHis' | sentenceCase }}- Output: 'This is a test. So is this'
- Notes:
- Capitalizes the first visible character of a string.
- Capitalizes the first visible character after a punctuation mark.
- Lowercases all subsequent characters, regardless of their original casing.
capitalCase
- Usage Syntax:
{{ inputString | capitalCase }} - Evaluates to: string
- Description: The capitalCase pipe transforms the input string by converting all letters to uppercase.
- Commonly referred to as: ALL CAPS formatting.
- Useful for:
- Emphasis, labels, headings, buttons, or alert messaging.
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: A new string with all alphabetical characters converted to uppercase.
- Example 1: Lowercase input
{{ 'hello world' | capitalCase }}- Output: 'HELLO WORLD'
- Example 2: Mixed casing
{{ 'Mixed Case Sentence' | capitalCase }}- Output: 'MIXED CASE SENTENCE'
- Notes:
- Only affects alphabetical characters; numbers, punctuation, and symbols are unchanged.
- This is equivalent to calling toUpperCase() in JavaScript.
lowerCase
- Usage Syntax:
{{ inputString | lowerCase }} - Evaluates to: string
- Description: The lowerCase pipe converts all alphabetical characters in a string to lowercase letters.
- Equivalent to JavaScript's native toLowerCase() method.
- Only affects alphabetical characters; numbers, punctuation, and symbols remain unchanged.
- Useful for:
- Normalizing user input for case-insensitive comparisons.
- Standardizing data for consistency in databases or APIs.
- Formatting text for display purposes.
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: A new string with all alphabetical characters converted to lowercase.
- Example 1: Uppercase input
{{ 'HELLO WORLD' | lowerCase }}- Output: 'hello world'
- Example 2: Mixed casing
{{ 'JavaScript Programming' | lowerCase }}- Output: 'javascript programming'
- Example 3: String with numbers and symbols
{{ 'WeB BasIcS 102!' | lowerCase }}- Output: 'web basics 102!'
- Notes:
- Returns a new string; does not mutate the original.
- Input must be a string (other data types will cause errors).
- This is the inverse operation of upperCase and capitalCase.
upperCase
- Usage Syntax:
{{ inputString | upperCase }} - Evaluates to: string
- Description: The upperCase pipe converts all alphabetical characters in a string to uppercase letters.
- Equivalent to JavaScript's native toUpperCase() method.
- Only affects alphabetical characters; numbers, punctuation, and symbols remain unchanged.
- Note: This pipe is functionally identical to the existing capitalCase pipe (ALL CAPS formatting).
- Useful for:
- Emphasis in headings, labels, or alert messaging.
- Normalizing data for case-insensitive matching.
- Formatting display text for consistency.
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: A new string with all alphabetical characters converted to uppercase.
- Example 1: Lowercase input
{{ 'hello world' | upperCase }}- Output: 'HELLO WORLD'
- Example 2: Mixed casing
{{ 'JavaScript Programming' | upperCase }}- Output: 'JAVASCRIPT PROGRAMMING'
- Example 3: String with numbers and symbols
{{ 'web basics 102!' | upperCase }}- Output: 'WEB BASICS 102!'
- Notes:
- Returns a new string; does not mutate the original.
- Input must be a string (other data types will cause errors).
- This pipe performs the same function as the existing capitalCase pipe.
- This is the inverse operation of lowerCase.
parseJSON
- Usage Syntax:
{{ inputString | parseJSON }} - Evaluates to: object
- Description: The parseJSON pipe attempts to parse the input string as valid JSON and return the resulting JavaScript object.
- Accepts any string formatted as valid JSON (e.g., objects, arrays, numbers, strings).
- Returns !error if parsing fails due to invalid format.
- Parameters: This pipe does not accept additional parameters.
- Returns:
- object: A parsed JavaScript object or array. Returns !error if the input is not a valid JSON string.
- Example 1: Parsing a JSON object
{{ '{"name":"Alice","age":30}' | parseJSON }}- Output: { name: "Alice", age: 30 }
- Example 2: Invalid JSON input
{{ 'not-a-valid-json' | parseJSON }}- Output: !error
- Notes:
- Input must be a properly escaped JSON string.
- Useful for transforming remote config values, user-generated content, or embedded metadata.
replace
- Usage Syntax: {{ inputString | replace: 'searchPattern': 'replaceValue' }}
- Evaluates to: string
- Description: The replace pipe searches the input string for the first occurrence of a given string or regular expression pattern and replaces it with the specified replacement value.
- Only the first match is replaced.
- Parameters:
- searchPattern:
- Type: string | RegExp
- Required: Yes
- Description: The string or regular expression pattern to search for.
- replaceValue:
- Type: string
- Required: Yes
- Description: The string to insert in place of the first match found.
- Returns:
- string: A new string with the first occurrence of the match replaced by the provided replacement. Returns !error if input is not a valid string or parameters.
- Example 1: Basic string replacement
{{ 'Hello world' | replace: 'world': 'there' }}- Output: 'Hello there'
- Example 2: Multiple matches exist, only first replaced
{{ 'foo foo foo' | replace: 'foo': 'bar' }}- Output: 'bar foo foo'
- Notes:
- Only the first match is replaced. For replacing all matches, use replaceAll.
- If you use a regex with the global flag, it will replace all instances instead.
replaceAll
- Usage Syntax:
{{ inputString | replaceAll: 'searchPattern': 'replaceValue' }} - Evaluates to: string
- Description: The replaceAll pipe searches the input string and replaces every occurrence of a specified string or regular expression pattern with the given replacement string.
- Operates globally, modifying all matches.
- Parameters:
- searchPattern:
- Type: string | RegExp
- Required: Yes
- Description: The string or regular expression to search for.
- replaceValue:
- Type: string
- Required: Yes
- Description: The string to use as a replacement for all matches.
- Returns:
- string: A new string with all matching instances replaced. Returns !error if the input is not a valid string.
- Example 1: Replace all instances of a word
{{ 'foo foo bar foo' | replaceAll: 'foo': 'baz' }}- Output: 'baz baz bar baz'
- Example 2: Global RegExp replacement
{{ 'One fish, two FISH, red fish, blue fish' | replaceAll: /fish/gi: 'cat' }}- Output: 'One cat, two cat, red cat, blue cat'
- Notes:
- If using a RegExp, make sure to pass the global flag (e.g., /pattern/g).
- String-based matches are case-sensitive unless a regex with flags is used.
trim
- Usage Syntax:
{{ inputString | trim }} - Evaluates to: string
- Description: The trim pipe removes leading and trailing whitespace from the input string.
- Equivalent to JavaScript's .trim() method.
- Internal whitespace (between words or characters) is preserved.
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: The original string with whitespace removed from the start and end.
- Example 1: Trimming spaces
{{ ' Hello world ' | trim }}- Output: 'Hello world'
- Notes:
- Does not alter internal spaces between words.
- Useful for validating and cleaning string input fields.
trimStart
- Usage Syntax:
{{ inputString | trimStart }} - Evaluates to: string
- Description: The trimStart pipe removes leading whitespace from the input string, including spaces and tabs at the start of the string. It preserves all whitespace at the end and within the string.
- Equivalent to JavaScript's .trimStart() method.
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: The string with whitespace removed only from the beginning.
- Example 1: Leading spaces removed
{{ ' Hello world' | trimStart }}- Output: 'Hello world'
- Example 2: Preserves trailing whitespace
{{ ' Hello world ' | trimStart }}- Output: 'Hello world '
- Notes:
- Only affects the beginning of the string.
- Use trimEnd to remove whitespace from the end or trim to remove from both ends.
trimEnd
- Usage Syntax:
{{ inputString | trimEnd }} - Evaluates to: string
- Description: The trimEnd pipe removes trailing whitespace from the input string, including spaces and tabs at the end of the string. It preserves all characters and whitespace at the beginning and within the string.
- Equivalent to JavaScript's .trimEnd() method.
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: The string with whitespace removed only from the end.
- Example 1: Remove spaces at the end
{{ 'Hello world ' | trimEnd }}- Output: 'Hello world'
- Example 2: Preserve leading whitespace
{{ ' Hello world ' | trimEnd }}- Output: ' Hello world'
- Notes:
- Only affects the end of the string.
insertTextAfter
- Usage Syntax:
{{ inputValue | insertTextAfter: 'textToAppend' }} - Evaluates to: string
- Description: The insertTextAfter pipe casts the input to a string (if it isn't one already) and appends the provided text to the end of that string.
- Useful for:
- Formatting output, adding suffixes, or constructing labels.
- Parameters:
- text:
- Type: string
- Required: Yes
- Description: The string to append to the input value.
- Returns:
- string: A new string with the provided text appended to the input's string representation. Returns !error if parameter is not a string.
- Example 1: Append text to string
{{ 'Hello' | insertTextAfter: ' World' }}- Output: 'Hello World'
- Example 2: Append to a number
{{ 42 | insertTextAfter: 'px' }}- Output: '42px'
- Notes:
- Input is implicitly cast to a string.
- No automatic spacing is added --- include spacing in the appended text if needed.
insertTextBefore
- Usage Syntax:
{{ inputValue | insertTextBefore: 'textToPrepend' }} - Evaluates to: string
- Description: The insertTextBefore pipe casts the input to a string (if it isn't already) and prepends the provided text to the beginning of that string.
- Useful for:
- Formatting output, adding prefixes, or generating labels.
- Parameters:
- text:
- Type: string
- Required: Yes
- Description: The string to prepend to the input value.
- Returns:
- string: A new string with the provided text prepended to the input's string representation.
- Example 1: Add currency symbol
{{ 50 | insertTextBefore: '$' }}- Output: '$50'
- Example 2: Prefix label
{{ 'Pending' | insertTextBefore: 'Status: ' }}- Output: 'Status: Pending'
- Notes:
- Input is always cast to a string before concatenation.
- No automatic spacing is added --- include spaces in the text if needed.
padNumber
- Usage Syntax:
{{ inputString | padNumber: 'start': targetLength: padString }} {{ inputString | padNumber: targetLength: padString }} - Evaluates to: string
- Description: The padNumber pipe pads a string with another string (repeated if necessary) until the resulting string reaches a specified target length.
- When the first argument is the string "start", padding is applied from the start (left) of the string using JavaScript's padStart() method.
- When the first argument is not "start", padding is applied from the end (right) of the string using JavaScript's padEnd() method.
- Commonly used to zero-pad numbers for formatting.
- Useful for:
- Formatting numbers with leading zeros (e.g., "00123").
- Creating fixed-width string representations.
- Aligning numeric data in tabular displays.
- Parameters:
- direction:
- Type: string
- Required: No (conditional)
- Description: When set to "start", applies padding from the left. When omitted or any other value, padding is applied from the right.
- targetLength:
- Type: number
- Required: Yes
- Description: The target length of the resulting string. If this value is less than or equal to the current string length, the original string is returned unchanged.
- padString:
- Type: string
- Required: No
- Description: The string used to pad the input. Defaults to a space character " " if not provided. If padString is too long to fit within targetLength, it will be truncated.
- Returns:
- string: A new string of the specified targetLength with padString applied from the specified direction.
- Example 1: Zero-pad from the start
{{ '5' | padNumber: 'start': 4: '0' }}- Output: '0005'
- Example 2: Pad from the end with default space
{{ 'abc' | padNumber: 10 }}- Output: 'abc ' (7 spaces added to the right)
- Example 3: Pad from the start with repeated string
{{ 'test' | padNumber: 'start': 15: '*' }}- Output: '***********test'
- Example 4: Target length less than string length (no padding)
{{ 'hello' | padNumber: 3 }}- Output: 'hello' (no change)
- Notes:
- Returns a new string; does not mutate the original.
- The targetLength parameter specifies the final length of the result string, NOT the amount to pad.
- To pad numbers, convert them to strings first using toString or equivalent.
- If padString is too long, it is truncated from the end to fit within targetLength.
toString
- Usage Syntax:
{{ inputValue | toString }} - Evaluates to: string
- Description: The toString pipe converts the input into a string representation, using the standard String() casting behavior.
- Works on any data type: numbers, booleans, arrays, objects, null, and undefined.
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: A stringified version of the input value.
- Example 1: Number to string
{{ 123 | toString }}- Output: '123'
- Example 4: Array to string
{{ [1, 2, 3] | toString }}- Output: '1,2,3'
- Notes:
- This pipe behaves like JavaScript's native String() constructor.
stringLength
- Usage Syntax:
{{ inputString | stringLength }} - Evaluates to: number
- Description: The stringLength pipe returns the number of characters in the input string. This includes spaces, punctuation, and special characters.
- Equivalent to accessing the .length property of a string in JavaScript.
- Parameters: This pipe does not accept additional parameters.
- Returns:
- number: The number of characters in the string. Returns !error if input is not castable to a string.
- Example 1: Standard string
{{ 'Hello' | stringLength }}- Output: 5
- Example 2: Non-string input
{{ 12345 | stringLength }}- Output: error
- Notes:
- Input is not cast to a string before measuring length.
slice
- Usage Syntax:
{{ inputString | slice: start }} {{ inputString | slice: start: end }} - Evaluates to: string
- Description: The slice pipe extracts a substring from the input string using 0-based index positions.
- Begins at the specified start index and ends before the optional end index.
- Supports negative indices, which count from the end of the string.
- Parameters:
- start:
- Type: number
- Required: Yes
- Description: The index to begin the slice (inclusive).
- end:
- Type: number
- Required: No
- Description: The index to end the slice (exclusive). Optional --- defaults to end of string.
- Returns:
- string: A substring extracted between the specified start and end indices. Returns !error if input is not a string.
- Example 1: Basic slice from index
{{ 'test' | slice: 1 }}- Output: 'est'
- Example 2: Negative index slice
{{ 'example' | slice: -3 }}- Output: 'ple'
- Notes:
- The character at the end index is not included in the result.
- Negative values start from the end of the string (-1 is the last character).
splitString
- Usage Syntax:
{{ inputString | splitString: separator }} - Evaluates to: string[]
- Description: The splitString pipe divides a string into an ordered array of substrings by searching for a separator pattern.
- Equivalent to JavaScript's native split() method.
- The separator is removed from the string, and the substrings are returned in an array.
- If the separator is not found, returns an array containing the entire string as a single element.
- Useful for:
- Parsing CSV data or comma-separated values.
- Breaking sentences into words or strings into characters.
- Extracting data from delimited strings.
- Parameters:
- separator:
- Type: string
- Required: Yes
- Description: The character or substring used to determine where to split the string. Use an empty string "" to split into individual characters.
- Returns:
- string[]: An array of substrings created by splitting the input string at each occurrence of the separator.
- Example 1: Split by space
{{ 'The quick brown fox' | splitString: ' ' }}- Output: ['The', 'quick', 'brown', 'fox']
- Example 2: Split by comma
{{ 'Jan,Feb,Mar,Apr' | splitString: ',' }}- Output: ['Jan', 'Feb', 'Mar', 'Apr']
- Example 3: Split into individual characters
{{ 'hello' | splitString: '' }}- Output: ['h', 'e', 'l', 'l', 'o']
- Example 4: Split by hyphen
{{ '2026-02-04' | splitString: '-' }}- Output: ['2026', '02', '04']
- Notes:
- Returns a new array; does not mutate the original string.
- If the separator appears at the beginning or end of the string, an empty string will appear at the corresponding position in the result array.
- If the separator is an empty string "", the string is split into individual characters.
matches
- Usage Syntax:
{{ inputString | matches: 'pattern' }} {{ inputString | matches: /pattern/i }} - Evaluates to: boolean
- Description: The matches pipe evaluates whether the input string matches a given regular expression.
- Accepts either a string (converted to a RegExp) or a RegExp object.
- Returns true if the pattern matches any part of the string.
- Parameters:
- match:
- Type: string | RegExp
- Required: Yes
- Description: The pattern to test against the input. Can be a string or RegExp.
- Returns:
- boolean: true if the string matches the pattern at least once; otherwise, false. Returns !error if input is not a string.
- Example 1: Simple string match
{{ 'hello world' | matches: 'world' }}- Output: true
- Example 2: Case-insensitive regex match
{{ 'Hello World' | matches: /world/i }}- Output: true
- Notes:
- For more control, use a RegExp directly (e.g., with flags like /pattern/i).
createRegex
- Usage Syntax:
{{ patternString | createRegex: flags }} - Evaluates to: RegExp
- Description: The createRegex pipe converts a string into a RegExp (Regular Expression) object for pattern matching operations.
- Equivalent to JavaScript's RegExp() constructor.
- Allows for dynamic regex creation where the pattern is determined at runtime.
- Useful for:
- Building regular expressions from user input or dynamic data.
- Pattern matching with string methods like match, test, or replace.
- Validating input formats dynamically.
- Parameters:
- pattern:
- Type: string
- Required: Yes (input string)
- Description: The regular expression pattern as a string. Special regex characters should be included as needed (e.g., \d for digits, \w for word characters).
- flags:
- Type: string
- Required: No
- Description: Optional flags that modify regex behavior. Common flags include: g (global), i (case-insensitive), m (multiline), s (dotAll), u (unicode). Multiple flags can be combined (e.g., "gi").
- Returns:
- RegExp: A RegExp object that can be used with string matching methods or conditional logic.
- Example 1: Simple pattern matching
{{ '\d+' | createRegex }}- Output: RegExp object matching one or more digits
- Example 2: Case-insensitive search
{{ 'hello' | createRegex: 'i' }}- Output: RegExp object matching "hello" (case-insensitive)
- Example 3: Global and case-insensitive flags
{{ 'test' | createRegex: 'gi' }}- Output: RegExp object matching "test" globally and case-insensitively
- Example 4: Word boundary pattern
{{ '\bcat\b' | createRegex: 'g' }}- Output: RegExp object matching whole word "cat" globally
- Notes:
- Returns a RegExp object, not a string.
- When using regex special characters in the pattern string, backslashes must be escaped (e.g., \d instead of \d).
- Use the returned RegExp object with methods like test(), match(), or replace().
- For static patterns that don't change, consider using regex literals (/pattern/flags) instead of this pipe for better performance.
encodeURI
- Usage Syntax:
{{ inputString | encodeURI }} - Evaluates to: string
- Description: The encodeURI pipe transforms the input string into a URI-encoded format by escaping characters that have special meaning in URLs.
- Encodes characters such as spaces, punctuation, and non-ASCII symbols.
- Leaves intact characters that are valid in a full URI (e.g., :, /, ?, &).
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: The URI-encoded version of the input string. Returns !error if input is not a string.
- Example 1: Encoding a string with spaces
{{ 'hello world' | encodeURI }}- Output: 'hello%20world'
- Example 2: Unicode characters
{{ 'café' | encodeURI }}- Output: 'caf%C3%A9'
- Notes:
- Uses JavaScript's native encodeURI() function internally.
- For encoding individual components (like query values), consider encodeURIComponent.
decodeURI
- Usage Syntax:
{{ inputString | decodeURI }} - Evaluates to: string
- Description: The decodeURI pipe decodes a previously URI-encoded string back to its human-readable form.
- Reverses encoding done by encodeURI or similar functions.
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: A decoded string. Returns !error if the input is not a valid URI-encoded string.
- Example 1: Basic URI decoding
{{ 'hello%20world' | decodeURI }}- Output: 'hello world'
- Example 2: Decoding special characters
{{ 'caf%C3%A9' | decodeURI }}- Output: 'café'
- Notes:
- Uses JavaScript's native decodeURI() method.
- Will throw or return !error if the input is malformed or contains invalid escape sequences.
encodeURIComponent
- Usage Syntax:
{{ inputString | encodeURIComponent }} - Evaluates to: string
- Description: The encodeURIComponent pipe transforms the input into a URI-safe format for use in individual URI components, such as query parameter values or path segments.
- Escapes all characters with special meaning in URIs, including &, =, ?, /, :, etc.
- More aggressive than encodeURI.
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: The URI Component-encoded version of the input string. Returns !error if input is not castable to a string.
- Example 1: Encode a query value
{{ 'value with spaces & symbols' | encodeURIComponent }}- Output: 'value%20with%20spaces%20%26%20symbols'
- Example 2: Special URI characters
{{ 'name=value&sort=asc' | encodeURIComponent }}- Output: 'name%3Dvalue%26sort%3Dasc'
- Notes:
- Uses JavaScript's native encodeURIComponent() function.
- Ideal for encoding query strings and parameter values.
decodeURIComponent
- Usage Syntax:
{{ inputString | decodeURIComponent }} - Evaluates to: string
- Description: The decodeURIComponent pipe decodes a previously URI Component-encoded string back to its original, human-readable form.
- Reverses the encoding applied by encodeURIComponent.
- Converts escape sequences like %20 to spaces and %3D to =.
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: The decoded string. Returns !error if the input is not a valid URI Component-encoded string.
- Example 1: Decode an encoded query value
{{ 'value%20with%20spaces%20%26%20symbols' | decodeURIComponent }}- Output: 'value with spaces & symbols'
- Example 2: Decode a full query parameter string
{{ 'name%3Dvalue%26sort%3Dasc' | decodeURIComponent }}- Output: 'name=value&sort=asc'
- Notes:
- Uses JavaScript's native decodeURIComponent() function.
- For full URI decoding (including :, /, #), use decodeURI instead.
encodeBase64
- Usage Syntax:
{{ inputValue | encodeBase64 }} - Evaluates to: string
- Description: The encodeBase64 pipe creates a Base64-encoded ASCII string from the input value.
- Equivalent to JavaScript's btoa() function ("binary to ASCII").
- Input is coerced to a string before encoding.
- Base64 encoding converts data into text format for safe transmission over text-based protocols.
- Limitation: In Node.js, btoa() is designed only for strings where each character represents a single byte (Latin-1/extended ASCII). It is not directly compatible with full Unicode strings (which use multi-byte encodings like UTF-8) and will throw an InvalidCharacterError if you try to encode multi-byte characters.
- Useful for:
- Embedding binary data (like images) in HTML, JSON, or XML.
- Transmitting data over protocols that only support text.
- Encoding data for storage in text-based formats.
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: A Base64-encoded ASCII string representing the input data. Returns !error if the input contains characters outside the Latin-1/extended ASCII range.
- Example 1: Encode simple text
{{ 'Hello, world' | encodeBase64 }}- Output: 'SGVsbG8sIHdvcmxk'
- Example 2: Encode single word
{{ 'test' | encodeBase64 }}- Output: 'dGVzdA=='
- Example 3: Round-trip encode and decode
{{ 'data' | encodeBase64 | decodeBase64 }}- Output: 'data'
- Notes:
- Returns a new Base64-encoded string; does not mutate the original.
- Input is coerced to a string before encoding.
- Important: This pipe only supports Latin-1/extended ASCII characters (code points < 256). Unicode characters with multi-byte encodings will cause InvalidCharacterError.
- Base64 encoding increases data size by approximately 33%.
- Base64 encoding is NOT encryption---it is easily reversible with decodeBase64.
- Use decodeBase64 to reverse this operation.
decodeBase64
- Usage Syntax:
{{ encodedString | decodeBase64 }} - Evaluates to: string
- Description: The decodeBase64 pipe decodes a Base64-encoded string back to its original string representation.
- Equivalent to JavaScript's atob() function ("ASCII to binary").
- Input is coerced to a string before decoding.
- This is the inverse operation of encodeBase64.
- Useful for:
- Retrieving original data from Base64-encoded strings.
- Decoding embedded data in APIs, HTML, or JSON.
- Processing transmitted data that was encoded for safe transport.
- Parameters: This pipe does not accept additional parameters.
- Returns:
- string: The decoded string. Returns !error if the input is not valid Base64.
- Example 1: Decode Base64 string
{{ 'SGVsbG8sIHdvcmxk' | decodeBase64 }}- Output: 'Hello, world'
- Example 2: Decode with padding characters
{{ 'dGVzdA==' | decodeBase64 }}- Output: 'test'
- Example 3: Round-trip decode and encode
{{ 'SGVsbG8=' | decodeBase64 | encodeBase64 }}- Output: 'SGVsbG8='
- Notes:
- Returns a new decoded string; does not mutate the original.
- Input is coerced to a string before decoding.
- Input must be a valid Base64-encoded string. Invalid Base64 will return !error.
- This is the inverse operation of encodeBase64.
- The decoded string will contain only Latin-1/extended ASCII characters (code points < 256).
Did this answer your question?
