> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/kontroly/preobrazovannyi-tekst.md).

# Преобразованный текст

<div align="left"><figure><img src="https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FOZnK5uomDD4zh5OomQYH%2Fimage.png?alt=media&amp;token=9b02b0ff-1e8d-488f-b5ab-8383898439d5" alt=""><figcaption><p>иконка компонента</p></figcaption></figure></div>

Компонент для преобразования строковых значений

**Свойства:**

* *<mark style="color:purple;">selectedConfig</mark>* - тип преобразования, может принимать значения:
  * **Число (number)** - преобразование строки в числовое значение
  * **Время (time)** - преобразование числа во временную метку
  * **Дата (date)** - преобразование **ISO** строки даты в необходимый формат
  * **Функция (custom)** - ручное преобразование с помощью описанной вручную js функции
* *<mark style="color:purple;">options</mark>* - набор опций для каждого типа преобразования

В зависимости от выбранного типа, поле options может иметь следующие настройки:

**Число**:&#x20;

Для преобразования строк в числа / извлечения чисел из строковых значений

* без дополнительных настроек

Примеры преобразования:

* исходное значение: <mark style="color:orange;">"20 с"</mark>

  преобразованное значение:  <mark style="color:blue;">20</mark>
* исходное значение: <mark style="color:orange;">"2023-04-17"</mark>

  преобразованное значение:  <mark style="color:blue;">2023</mark>
* исходное значение: <mark style="color:orange;">"Прошло 7 дней с того момента..."</mark>

  преобразованное значение:  <mark style="color:blue;">7</mark>

**Время:**

Для преобразования чисел и ISO строк в необходимый формат

* *<mark style="color:purple;">measure</mark>* - единицы измерения исходного значения
* *<mark style="color:purple;">formatString</mark>* - строка форматирования выходного значения

Примеры преобразования:

* исходное значение: <mark style="color:blue;">115</mark> / <mark style="color:orange;">"115"</mark>

  *<mark style="color:purple;">measure</mark>*: **Секунды**

  *<mark style="color:purple;">formatString</mark>*: **m' ss"**

  преобразованное значение: <mark style="color:orange;">1' 55"</mark>
* исходное значение: <mark style="color:orange;">"2023-10-02T09:07:49+00:00"</mark>

  *<mark style="color:purple;">measure</mark>*:&#x20;

  *<mark style="color:purple;">formatString</mark>*: **hч mmм ssс**

  преобразованное значение: <mark style="color:orange;">"9ч 07м 49с"</mark>

**Дата**:

Для преобразования ISO строк дат в необходимый формат. Преобразование учитывает местное время пользователя.

* *<mark style="color:purple;">formatString</mark>* - строка форматирования выходного значения

Примеры преобразования:

* исходное значение: <mark style="color:orange;">"2023-10-02T09:07:49+00:00"</mark>

  *<mark style="color:purple;">formatString</mark>*: **dddd, D MMMM**

  преобразованное значение: <mark style="color:orange;">понедельник, 2 октября</mark>
* исходное значение: <mark style="color:orange;">"2023-10-02T09:07:49+00:00"</mark>

  *<mark style="color:purple;">formatString</mark>*: **dd HH:mm**

  преобразованное значение: <mark style="color:orange;">пн 12:07</mark>
* исходное значение: <mark style="color:orange;">"2023-10-02T09:07:49+00:00"</mark>

  *<mark style="color:purple;">formatString</mark>*: **D.MM.YY**

  преобразованное значение: <mark style="color:orange;">2.10.23</mark>

**Функция:**

Для случаев, когда существующих средств недостаточно для преобразования значения

* *<mark style="color:purple;">evalString</mark>* - строка, представляющая регулярное выражение

Примеры преобразования:

* исходное значение: <mark style="color:orange;">"2023-10-02T09:07:49+00:00"</mark>

  *<mark style="color:purple;">evalString</mark>* :&#x20;

  **(value) => { const result = value.split("T"); return result\[0]; }**

  преобразованное значение: <mark style="color:orange;">2023-10-02</mark>
* исходное значение: \[<mark style="color:blue;">10, 883, 1, 83, 115, 2099</mark>];

  *<mark style="color:purple;">evalString</mark>* :

  **(value) => { return Math.max(...value); }**

  преобразованное значение:  <mark style="color:blue;">2099</mark>

{% hint style="info" %}
Использовать данную опцию следует с осторожностью, т.к. она исполняется в основном потоке, и, как и с любым другим кодом js исполняемым таким образом, в сценариях, когда происходит выполнение бесконечного цикла, или переполнение стека, случится остановка работы вкладки или всего браузера, вследствие чего использование приложения станет невозможно без ручной модификации state.js файла.
{% endhint %}