표현식 (Expressions)을 사용하면 양식 유효성 검사, 장바구니와 같은 계산 컴포넌트, 비밀번호가 특정 조건을 충족하는지 확인하는 등 인터랙션을 완전히 다른 수준으로 끌어올려 프로토타입을 완벽하게 작동하는 제품처럼 수 있습니다.

표현식은 인터랙션의 일부이므로 요소의 내용을 설정하고, 조건을 만들고, 변수를 조작하는 데 사용할 수 있습니다.

표현식을 작성하는 방법

다음은 설명이 포함된 표현식에서 사용할 수 있는 데이터 유형입니다.

인터랙션의 일부로 표현식을 선택하면 사용 가능한 변수, 캔버스의 요소 및 지원되는 모든 함수가 포함된 목록이 자동으로 표시됩니다. 작성하는 동안 목록에 액세스하려면 변수에서는 $, 요소에서는 「'」기호와 함께 함수에 첫 문자를 입력합니다.

https://images.prismic.io/uxpincommunity%2F447eaebd-2c38-4c70-a8e3-99b07e90082f_expressions_1.gif?auto=compress,format

한 표현식에 다른 유형의 데이터를 혼합할 수 있으므로 유형에 따라 적절한 구문을 사용하는 것이 중요합니다.

각 함수는 괄호 안에 특정 유형의 인수를 기입해야 합니다. 하지만 일부 인수는 선택사항이 될 수도 있으며, 이 경우에는 설명에 물음표 마크가 표시됩니다 (예: time(format?)) min(number, number, ...)와 같은 일부 함수에서는, 인수의 수에는 제한이 없습니다.

복합식

다른 유형의 데이터를 하나의 수식으로 결합할 수 있습니다. 간단한 계산을 예로 들면, 정확한 수치나, 주어진 요소나 변수에 수치가 저장되어 있는 경우는 그 내용을 사용해 계산을 실시할 수가 있습니다.

https://images.prismic.io/uxpincommunity/aa6b37e965df0c24facb8b647b5e1136334cdce1_expressions_2.png?auto=compress,format

Input 1 요소로 사용자로부터 제공된 이메일 주소로부터 로그인을 작성하는 것을 생각해보세요. 이메일을 짧게 줄이고자 @ 기호 앞의 문자만 표시하려면 다음 두 가지 함수를 사용하십시오.

indexOf(string, searchString)