Skip to content

Handlebars.js 헬퍼

기본적인 {{#if}}, {{#unless}}, {{#each}} 헬퍼 외에도 블록 메이커에서는 다양한 헬퍼 문법을 지원해요.

구분헬퍼(Helper)사용 예시설명
Conditionaland{{#if (and property.flagA property.flagB)}} 모두 true예요 {{else}} 둘 중 하나는 false예요 {{/if}}· 여러 조건이 모두 true일 때만 true를 반환해요.
· 논리 연산에서 모든 조건이 참인지 확인할 때 사용해요.

예: {{and true true}}true, {{and true false}}false
Conditionalor{{#if (or property.flagA property.flagB)}} 둘 중 하나는 true예요 {{else}} 모두 false예요 {{/if}}· 여러 조건 중 하나라도 true이면 true를 반환해요.
· 둘 중 하나만 참이면 되는 조건을 구성할 때 사용해요.

예: {{or false true}}true, {{or false false}}false
ConditionalisNil{{#if (isNil property.value)}} 값이 없어요 {{else}} 값이 있어요 {{/if}}· 값이 null 또는 undefined인지 확인해요.
· 아무 값도 정의되지 않은 상태인지 확인할 때 사용해요.

예: {{isNil null}}true, {{isNil "hello"}}false
ConditionalisEmpty{{#if (isEmpty property.text)}} 비어 있어요 {{else}} 내용이 있어요 {{/if}}· 값이 비어 있는지를 확인해요. 문자열, 배열, 객체에 사용할 수 있어요.

예: {{isEmpty ""}}true, {{isEmpty "abc"}}false
Conditionaleq{{#if (eq property.value 5)}} 값이 5예요 {{else}} 5가 아니에요 {{/if}}· 두 값이 같은지를 비교해요.

예: {{eq 5 5}}true, {{eq 5 "5"}}false
Conditionalgt{{#if (gt property.value 10)}} 10보다 커요 {{else}} 10 이하예요 {{/if}}· 왼쪽 값이 오른쪽 값보다 큰지 비교해요.
· 숫자의 크기를 비교할 때 자주 사용해요.

예: {{gt 5 3}}true, {{gt 2 4}}false
Conditionalgte{{#if (gte property.value 10)}} 10 이상이에요 {{else}} 10 미만이에요 {{/if}}· 왼쪽 값이 오른쪽 값보다 크거나 같은지 확인해요.
· 특정 기준 이상인지 조건을 검사할 때 사용해요.

예: {{gte 5 5}}true, {{gte 3 4}}false
Conditionallt{{#if (lt property.value 10)}} 10보다 작아요 {{else}} 10 이상이에요 {{/if}}· 왼쪽 값이 오른쪽 값보다 작은지 비교해요.
· 값이 기준보다 작은지 확인할 때 사용해요.

예: {{lt 2 5}}true, {{lt 7 3}}false
Conditionallte{{#if (lte property.value 10)}} 10 이하예요 {{else}} 10 초과예요 {{/if}}· 왼쪽 값이 오른쪽 값보다 작거나 같은지 확인해요.
· 숫자가 어떤 한도를 넘지 않았는지 확인할 때 사용해요.

예: {{lte 3 3}}true, {{lte 5 2}}false
ConditionalinRange{{#if (inRange property.value 1 10)}} 범위 안에 있어요 {{else}} 범위를 벗어났어요 {{/if}}· 값이 두 수 사이에 있는지 확인해요.

예: {{inRange 3 1 5}}true, {{inRange 6 1 5}}false
ConditionalstartsWith{{#if (startsWith property.text "Hi")}} Hi로 시작해요 {{else}} 다른 시작이에요 {{/if}}· 문자열이 특정 문자로 시작하는지 확인해요.
· 접두사를 검사하거나 특정 구문으로 시작하는지 판단할 때 사용해요.

예: {{startsWith "hello" "he"}}true
ConditionalendsWith{{#if (endsWith property.text "ing")}} ing로 끝나요 {{else}} 다른 끝이에요 {{/if}}· 문자열이 특정 문자로 끝나는지 확인해요.
· 접미사를 검사할 때 사용해요.

예: {{endsWith "hello" "lo"}}true
Conditionalincludes{{#if (includes property.text "hello")}} 'hello'가 포함되어 있어요 {{else}} 포함되어 있지 않아요 {{/if}}· 문자열이나 배열에 특정 값이 포함되어 있는지 확인해요.
· 어떤 키워드나 항목이 있는지 체크할 때 사용해요.

예: {{includes "apple" "pp"}}true
Numberceil{{ceil property.value}}· 숫자를 올림해요.

예: {{ceil 4.2}}5
Numberfloor{{floor property.value}}· 숫자를 내림해요.

예: {{floor 4.8}}4
Numberround{{round property.value}}· 숫자를 반올림해요.

예: {{round 4.6}}5
Numberadd{{add property.a property.b}}· 두 수를 더해요.

예: {{add 2 3}}5
Numbersubtract{{subtract property.total property.used}}· 왼쪽 값에서 오른쪽 값을 빼요.

예: {{subtract 5 2}}3
Numbermultiply{{multiply property.width property.height}}· 두 수를 곱해요.

예: {{multiply 3 4}}12
Numberdivide{{divide property.total property.count}}· 왼쪽 값을 오른쪽 값으로 나눠요.

예: {{divide 10 2}}5
NumberminBy{{minBy property.people "age"}}· 배열에서 가장 작은 값을 가진 항목을 찾아요.

예: {{minBy items "age"}}
NumbermaxBy{{maxBy property.students "score"}}· 배열에서 가장 큰 값을 가진 항목을 찾아요.

예: {{maxBy items "score"}}
NumbermeanBy{{meanBy property.scores "value"}}· 특정 속성의 평균을 구해요.

예: {{meanBy items "score"}} → 평균값
NumbersumBy{{sumBy property.items "count"}}· 특정 속성의 합계를 구해요.

예: {{sumBy items "price"}} → 합계
StringcamelCase{{camelCase property.text}}· 문자열을 camelCase 형식으로 바꿔요.

예: {{camelCase "hello world"}}helloWorld
StringkebabCase{{kebabCase property.title}}· 문자열을 kebab-case 형식으로 바꿔요.

예: {{kebabCase "Hello World"}}hello-world
StringlowerCase{{lowerCase property.text}}· 문자열을 모두 소문자로 바꿔요 (공백 포함).

예: {{lowerCase "HELLO WORLD"}}hello world
StringsnakeCase{{snakeCase property.text}}· 문자열을 snake_case 형식으로 바꿔요.

예: {{snakeCase "Hello World"}}hello_world
StringstartCase{{startCase property.text}}· 문자열의 단어를 대문자로 시작하게 바꿔요.

예: {{startCase "hello world"}}Hello World
StringupperCase{{upperCase property.text}}· 문자열을 모두 대문자로 바꿔요 (공백 포함).

예: {{upperCase "hello world"}}HELLO WORLD
StringlowerFirst{{lowerFirst property.word}}· 문자열의 첫 글자만 소문자로 바꿔요.

예: {{lowerFirst "Hello"}}hello
StringupperFirst{{upperFirst property.word}}· 문자열의 첫 글자만 대문자로 바꿔요.

예: {{upperFirst "hello"}}Hello
StringtoLower{{toLower property.text}}· 문자열을 모두 소문자로 바꿔요.

예: {{toLower "HELLO"}}hello
StringtoUpper{{toUpper property.text}}· 문자열을 모두 대문자로 바꿔요.

예: {{toUpper "hello"}}HELLO
Stringcapitalize{{capitalize property.text}}· 첫 글자를 대문자로 바꿔요.

예: {{capitalize "hello"}}Hello
StringpadStart{{padStart property.number 4 "0"}}· 문자열 앞을 채워 길이를 맞춰요.

예: {{padStart "1" 3 "0"}}001
StringpadEnd{{padEnd property.code 5 "0"}}· 문자열 끝을 채워 길이를 맞춰요.

예: {{padEnd "a" 3 "_"}}a__
Stringtrim{{trim property.text}}· 문자열 앞뒤의 공백을 제거해요.

예: {{trim " hello "}}hello
Stringjoin{{join property.items ", "}}· 문자열 구분자를 사용해 배열을 하나의 문자열로 만들 수 있어요.

예: {{join property.items ", "}}a, b, c
Stringsplit{{split property.text ","}}· 문자열을 구분자로 나눠 배열로 만들어요.

예: {{split property.text ","}}["a", "b"]
Datedatetime{{datetime post.createdDate}}· ISO8601 날짜 문자열을 포맷팅해요.
· 기본 포맷 사용 시에는 포맷 문자열을 생략하거나 단축 포맷(date, datetime)를 사용할 수 있어요.
· 커스텀 포맷 사용 시에는 Unicode Technical Standard #35 포맷을 사용할 수 있어요.

예: {{datetime "2025-01-01T00:00:00+09:00"}}2025-01-01
예: {{datetime "2025-01-01T00:00:00+09:00" "date"}}2025-01-01
예: {{datetime "2025-01-01T00:00:00+09:00" "datetime"}}2025-01-01 00:00
예: {{datetime "2025-01-01T00:00:00+09:00" "yyyy/MM/dd HH:mm" }}2025/01/01 00:00
Arrayfirst{{first property.items}}· 배열의 첫 번째 값을 가져와요.

예: {{first property.items}} → 배열의 첫 번째 항목
Arraylast{{last property.items}}· 배열의 마지막 값을 가져와요.

예: {{last property.items}} → 배열의 마지막 항목
Arrayslice{{slice property.items 1 3}}· 배열의 일부를 잘라내요.

예: {{slice property.items 1 3}} → 1번째부터 3번째 전까지
Arraysize{{size property.items}}· 배열, 문자열, 객체의 길이나 개수를 구해요.

예: {{size "abc"}}3
Arrayconcat{{concat property.items property.extra}}· 여러 값을 배열로 이어붙여요.

예: {{concat property.items property.extra}} → 배열을 합쳐요
ArrayorderBy{{orderBy property.records "name" "desc"}}· 배열을 정렬해요.

예: {{orderBy items "name" "asc"}}
Arrayfilter{{filter property.items "isActive"}}· 조건에 맞는 항목만 걸러내요.

예: {{filter property.items "isActive"}}
Arrayreject{{reject property.tasks "completed"}}· 조건을 만족하지 않는 항목만 걸러내요.

예: {{reject items "isDone"}}
Arraychunk{{chunk property.items 2}}· 배열을 지정한 크기로 나눠 2차원 배열로 만들어요.

예: {{chunk property.items 2}}[[a,b],[c,d]] 형태
Randomrandom{{random 0 10}}· 주어진 범위에서 무작위 수를 만들어요.

예: {{random 1 5}}3
Randomshuffle{{shuffle property.items}}· 배열의 순서를 무작위로 섞어요.

예: {{shuffle property.items}} → 섞인 배열
Randomsample{{sample property.items}}· 배열에서 무작위 항목 하나를 골라요.

예: {{sample property.items}} → 무작위 요소 하나
RandomsampleSize{{sampleSize property.items 2}}· 배열에서 지정한 개수만큼 무작위로 골라요.

예: {{sampleSize property.items 2}} → 무작위 2개 항목
Otherrange{{range 1 6}}· 숫자 범위 배열을 만들어요.

예: {{range 0 3}}[0, 1, 2]
OtherdefaultTo{{defaultTo property.value "없음"}}· 값이 null 또는 undefined일 때 기본값을 설정해요.

예: {{defaultTo null "기본값"}}기본값
Type ConvertertoInteger{{toInteger property.value}}· 값을 정수로 바꿔요.

예: {{toInteger 4.7}}4
Type ConvertertoNumber{{toNumber property.string}}· 값을 숫자로 바꿔요.

예: {{toNumber "3.14"}}3.14
Type ConvertertoString{{toString property.value}}· 값을 문자열로 바꿔요.

예: {{toString 123}}123
Type ConvertertoJSON{{toJSON property.data}}· 객체나 배열을 JSON 문자열로 바꿔요.

예: {{toJSON property.data}}{"a":1}
Type ConverterfromJSON{{fromJSON property.jsonText}}· JSON 문자열을 다시 객체로 바꿔요.

예: {{fromJSON property.jsonText}} → 객체

Sixshop Developers Portal