Реактивный оператор выдает ошибку, когда попадает в неопределенные переменные.Как это предотвратить?

Question

просто поиграть со Svelte. И я заметил, что когда вычисляется реактивный оператор ($), он выдаст ошибку, когда одна из зависимых переменных не определена.

Хотя это поведение правильно, как я могу предотвратить его вычисление, если переменная, от которой оно зависит, не определена?

Чтобы увидеть ошибку, введите что-нибудь в любое из полей, а затем удалите ее, чтобы она стала пустой.

<script>
    let num = "";
    let secondNum = "";

    $: output = "prefix" + num.toString() + secondNum.toString() + "suffix";

    function handleChange() {
        console.log(num, secondNum);
    }

    function handleSubmit(e) {
        e.preventDefault();

    }

</script>
<form on:submit={handleSubmit}>
    <input type="number" bind:value={num} on:change={handleChange}>
    <input type="number" bind:value={secondNum} on:change={handleChange}>
    <button type="submit">
        Submit
    </button>
</form>

Answer 1

Очистка числового ввода приводит к тому, что его связанное значение равно undefined.num.toString() - это ошибка, если num не определено (это JavaScript, а не Svelte).

Самое простое исправление было бы так:

$: output = `prefix${num || ''}${secondNum || ''}suffix`;