template
Use template strings to replace placeholders, supporting both object and array data.
Basic Usage
typescript
import { template } from 'radash'
const templateStr = 'Hello {{name}}, welcome to {{company}}!'
const data = { name: 'Alice', company: 'Tech Corp' }
console.log(template(templateStr, data)) // 'Hello Alice, welcome to Tech Corp!'
Syntax
typescript
function template(str: string, data: Record<string, any>): string
Parameters
str
(string): Template string containing placeholdersdata
(Record<string, any>): Data object for replacing placeholders
Return Value
Returns a string with placeholders replaced.
Examples
Basic Template Replacement
typescript
import { template } from 'radash'
const templateStr = 'Hello {{name}}, you are {{age}} years old.'
const data = { name: 'Alice', age: 25 }
const result = template(templateStr, data)
console.log(result) // 'Hello Alice, you are 25 years old.'
Handling Missing Placeholders
typescript
import { template } from 'radash'
const templateStr = 'Hello {{name}}, welcome to {{company}}!'
const data = { name: 'Alice' } // company is missing
const result = template(templateStr, data)
console.log(result) // 'Hello Alice, welcome to !'
Handling Nested Objects
typescript
import { template } from 'radash'
const templateStr = 'User: {{user.name}}, Email: {{user.email}}, Age: {{user.profile.age}}'
const data = {
user: {
name: 'Alice',
email: 'alice@example.com',
profile: {
age: 25
}
}
}
const result = template(templateStr, data)
console.log(result) // 'User: Alice, Email: alice@example.com, Age: 25'
Handling Array Data
typescript
import { template } from 'radash'
const templateStr = 'First item: {{items.0}}, Second item: {{items.1}}'
const data = {
items: ['apple', 'banana', 'orange']
}
const result = template(templateStr, data)
console.log(result) // 'First item: apple, Second item: banana'
Handling Complex Nesting
typescript
import { template } from 'radash'
const templateStr = `
User Profile:
- Name: {{user.profile.name}}
- Email: {{user.profile.email}}
- Address: {{user.profile.address.city}}, {{user.profile.address.country}}
- Skills: {{user.skills.0}}, {{user.skills.1}}
`
const data = {
user: {
profile: {
name: 'Alice',
email: 'alice@example.com',
address: {
city: 'Beijing',
country: 'China'
}
},
skills: ['JavaScript', 'TypeScript', 'React']
}
}
const result = template(templateStr, data)
console.log(result)
// User Profile:
// - Name: Alice
// - Email: alice@example.com
// - Address: Beijing, China
// - Skills: JavaScript, TypeScript
Handling Different Value Types
typescript
import { template } from 'radash'
const templateStr = 'Name: {{name}}, Age: {{age}}, Active: {{isActive}}, Score: {{score}}'
const data = {
name: 'Alice',
age: 25,
isActive: true,
score: 95.5
}
const result = template(templateStr, data)
console.log(result) // 'Name: Alice, Age: 25, Active: true, Score: 95.5'
Handling Null and Undefined
typescript
import { template } from 'radash'
const templateStr = 'Name: {{name}}, Email: {{email}}, Phone: {{phone}}'
const data = {
name: 'Alice',
email: null,
phone: undefined
}
const result = template(templateStr, data)
console.log(result) // 'Name: Alice, Email: , Phone: '
Handling Special Characters
typescript
import { template } from 'radash'
const templateStr = 'Message: {{message}}, URL: {{url}}'
const data = {
message: 'Hello & Welcome!',
url: 'https://example.com?param=value'
}
const result = template(templateStr, data)
console.log(result) // 'Message: Hello & Welcome!, URL: https://example.com?param=value'
Handling Function Values
typescript
import { template } from 'radash'
const templateStr = 'Name: {{name}}, Greeting: {{greeting}}'
const data = {
name: 'Alice',
greeting: () => 'Hello!'
}
const result = template(templateStr, data)
console.log(result) // 'Name: Alice, Greeting: function'
Handling Object Values
typescript
import { template } from 'radash'
const templateStr = 'User: {{user}}, Settings: {{settings}}'
const data = {
user: { name: 'Alice', age: 25 },
settings: { theme: 'dark', notifications: true }
}
const result = template(templateStr, data)
console.log(result) // 'User: [object Object], Settings: [object Object]'
Handling Array Values
typescript
import { template } from 'radash'
const templateStr = 'Tags: {{tags}}, Numbers: {{numbers}}'
const data = {
tags: ['javascript', 'typescript', 'react'],
numbers: [1, 2, 3, 4, 5]
}
const result = template(templateStr, data)
console.log(result) // 'Tags: javascript,typescript,react, Numbers: 1,2,3,4,5'
Handling Date Values
typescript
import { template } from 'radash'
const templateStr = 'Created: {{createdAt}}, Updated: {{updatedAt}}'
const data = {
createdAt: new Date('2023-01-01'),
updatedAt: new Date('2023-12-31')
}
const result = template(templateStr, data)
console.log(result) // 'Created: 2023-01-01T00:00:00.000Z, Updated: 2023-12-31T00:00:00.000Z'
Handling Boolean Values
typescript
import { template } from 'radash'
const templateStr = 'Active: {{isActive}}, Verified: {{isVerified}}, Premium: {{isPremium}}'
const data = {
isActive: true,
isVerified: false,
isPremium: true
}
const result = template(templateStr, data)
console.log(result) // 'Active: true, Verified: false, Premium: true'
Handling Number Values
typescript
import { template } from 'radash'
const templateStr = 'ID: {{id}}, Score: {{score}}, Rating: {{rating}}'
const data = {
id: 123,
score: 95.5,
rating: 4.8
}
const result = template(templateStr, data)
console.log(result) // 'ID: 123, Score: 95.5, Rating: 4.8'
Handling Empty Strings
typescript
import { template } from 'radash'
const templateStr = 'Name: {{name}}, Description: {{description}}'
const data = {
name: 'Alice',
description: ''
}
const result = template(templateStr, data)
console.log(result) // 'Name: Alice, Description: '
Handling Zero Values
typescript
import { template } from 'radash'
const templateStr = 'Count: {{count}}, Price: {{price}}, Rating: {{rating}}'
const data = {
count: 0,
price: 0.0,
rating: 0
}
const result = template(templateStr, data)
console.log(result) // 'Count: 0, Price: 0, Rating: 0'
Handling Complex Templates
typescript
import { template } from 'radash'
const templateStr = `
# User Profile
## Basic Information
- **Name**: {{user.name}}
- **Email**: {{user.email}}
- **Age**: {{user.age}}
## Address
- **City**: {{user.address.city}}
- **Country**: {{user.address.country}}
- **Postal Code**: {{user.address.postalCode}}
## Preferences
- **Theme**: {{user.preferences.theme}}
- **Language**: {{user.preferences.language}}
- **Notifications**: {{user.preferences.notifications}}
## Skills
- **Primary**: {{user.skills.0}}
- **Secondary**: {{user.skills.1}}
- **Additional**: {{user.skills.2}}
`
const data = {
user: {
name: 'Alice Smith',
email: 'alice@example.com',
age: 25,
address: {
city: 'Beijing',
country: 'China',
postalCode: '100000'
},
preferences: {
theme: 'dark',
language: 'en',
notifications: true
},
skills: ['JavaScript', 'TypeScript', 'React']
}
}
const result = template(templateStr, data)
console.log(result)
Handling API Response Templates
typescript
import { template } from 'radash'
const templateStr = `
API Response:
- Status: {{status}}
- Message: {{message}}
- Data: {{data}}
- Timestamp: {{timestamp}}
- Request ID: {{requestId}}
`
const data = {
status: 200,
message: 'Success',
data: { id: 1, name: 'Alice' },
timestamp: new Date().toISOString(),
requestId: 'req_123456'
}
const result = template(templateStr, data)
console.log(result)
Handling Error Message Templates
typescript
import { template } from 'radash'
const templateStr = 'Error {{code}}: {{message}} at {{location}}'
const data = {
code: 404,
message: 'Resource not found',
location: '/api/users/999'
}
const result = template(templateStr, data)
console.log(result) // 'Error 404: Resource not found at /api/users/999'
Handling Email Templates
typescript
import { template } from 'radash'
const templateStr = `
Subject: Welcome to {{company}}, {{name}}!
Dear {{name}},
Welcome to {{company}}! We're excited to have you on board.
Your account details:
- Username: {{username}}
- Email: {{email}}
- Role: {{role}}
Best regards,
The {{company}} Team
`
const data = {
name: 'Alice Smith',
company: 'Tech Corp',
username: 'alice.smith',
email: 'alice@example.com',
role: 'Software Developer'
}
const result = template(templateStr, data)
console.log(result)
Handling Configuration File Templates
typescript
import { template } from 'radash'
const templateStr = `
# Application Configuration
## Server Settings
server:
host: {{server.host}}
port: {{server.port}}
timeout: {{server.timeout}}
## Database Settings
database:
url: {{database.url}}
pool:
min: {{database.pool.min}}
max: {{database.pool.max}}
## API Settings
api:
baseUrl: {{api.baseUrl}}
version: {{api.version}}
`
const data = {
server: {
host: 'localhost',
port: 3000,
timeout: 5000
},
database: {
url: 'postgresql://localhost:5432/mydb',
pool: {
min: 1,
max: 10
}
},
api: {
baseUrl: 'https://api.example.com',
version: 'v1'
}
}
const result = template(templateStr, data)
console.log(result)
Handling HTML Templates
typescript
import { template } from 'radash'
const templateStr = `
<div class="user-card">
<h2>{{user.name}}</h2>
<p>Email: {{user.email}}</p>
<p>Age: {{user.age}}</p>
<p>Location: {{user.location}}</p>
<div class="skills">
<h3>Skills:</h3>
<ul>
<li>{{user.skills.0}}</li>
<li>{{user.skills.1}}</li>
<li>{{user.skills.2}}</li>
</ul>
</div>
</div>
`
const data = {
user: {
name: 'Alice Smith',
email: 'alice@example.com',
age: 25,
location: 'Beijing, China',
skills: ['JavaScript', 'TypeScript', 'React']
}
}
const result = template(templateStr, data)
console.log(result)
Handling SQL Query Templates
typescript
import { template } from 'radash'
const templateStr = `
SELECT {{fields}}
FROM {{table}}
WHERE {{conditions}}
ORDER BY {{orderBy}}
LIMIT {{limit}}
`
const data = {
fields: 'id, name, email, created_at',
table: 'users',
conditions: 'status = "active" AND age > 18',
orderBy: 'created_at DESC',
limit: 10
}
const result = template(templateStr, data)
console.log(result)
Differences from Other Methods
String.replace()
: Native string replacement, limited functionalitytemplate()
: Template string replacement method provided by radashlodash.template()
: Similar functionality, but different syntax
Practical Application Scenarios
- Email Templates: Generate personalized email content
- HTML Templates: Generate dynamic HTML content
- Configuration Files: Generate configuration file content
- Error Messages: Generate formatted error messages
- API Responses: Format API response content