Hone logo
Hone
Problems

Simple Javascript Template Compiler

This challenge asks you to build a basic compiler for a simplified template syntax within JavaScript. Template engines like Handlebars or Mustache allow you to embed dynamic data within static HTML-like structures. This exercise focuses on creating a minimal version of that functionality, providing a foundation for understanding how template engines work.

Problem Description

You are tasked with creating a JavaScript function called compileTemplate that takes two arguments: a template string and a data object. The template string will contain placeholders denoted by double curly braces {{ }}. These placeholders will be replaced with corresponding values from the data object.

What needs to be achieved:

The compileTemplate function should parse the template string, identify the placeholders, and replace them with the values from the provided data object. The function should return a new string with all placeholders replaced.

Key Requirements:

  • Placeholder Identification: The function must accurately identify placeholders in the format {{key}}.
  • Data Lookup: The function must correctly look up values in the data object using the key found within the placeholder.
  • String Replacement: The function must replace the placeholder with the corresponding value from the data object. If a key is not found in the data object, the placeholder should be replaced with an empty string.
  • No Side Effects: The function should not modify the original template string or the data object.

Expected Behavior:

The function should return a new string where all placeholders have been replaced with their corresponding values. If a placeholder's key is not found in the data object, the placeholder should be replaced with an empty string.

Edge Cases to Consider:

  • Empty Template: Handle the case where the template string is empty.
  • No Placeholders: Handle the case where the template string contains no placeholders.
  • Nested Curly Braces: The template syntax only supports single-level placeholders (e.g., {{name}}). Do not attempt to handle nested curly braces (e.g., {{user.name}}).
  • Data Object with Null/Undefined Values: Handle cases where the data object contains null or undefined values. These should be converted to strings "null" and "undefined" respectively.
  • Data Object with Non-String Values: Handle cases where the data object contains values that are not strings (numbers, booleans, arrays, objects). These should be converted to strings using String().

Examples

Example 1:

Input: template = "Hello, {{name}}!", data = { name: "Alice" }
Output: "Hello, Alice!"
Explanation: The placeholder `{{name}}` is replaced with the value "Alice" from the data object.

Example 2:

Input: template = "My age is {{age}}.", data = { age: 30 }
Output: "My age is 30."
Explanation: The placeholder `{{age}}` is replaced with the value 30 (converted to a string) from the data object.

Example 3:

Input: template = "Hello, {{city}}!", data = { name: "Bob" }
Output: "Hello, !"
Explanation: The placeholder `{{city}}` is not found in the data object, so it's replaced with an empty string.

Example 4:

Input: template = "Value: {{value}}", data = { value: null }
Output: "Value: null"
Explanation: The placeholder `{{value}}` is replaced with the string "null".

Example 5:

Input: template = "Template with no placeholders", data = { name: "Charlie" }
Output: "Template with no placeholders"
Explanation: No placeholders are present in the template, so the original string is returned.

Constraints

  • The template string will be a string.
  • The data object will be a JavaScript object.
  • The keys within the placeholders will be strings.
  • The template string's length will be less than 1000 characters.
  • The data object will contain at most 10 key-value pairs.
  • Performance: The function should execute in O(n) time, where n is the length of the template string.

Notes

Consider using regular expressions to efficiently identify and replace the placeholders. Remember to handle edge cases gracefully and ensure your function doesn't modify the input arguments. Think about how to iterate through the template string and identify the start and end of each placeholder. A simple iterative approach is preferred over more complex parsing techniques for this exercise.

Loading editor...
javascript