Возникли проблемы с объединением двух строк в TypeScript

Я пытаюсь объединить две строки в TypeScript следующим образом:

let string1 = new String("IdNumber: " + this.IdNumber);
let string2 = new String(this.notes);
this.notes = string1.concat(string2.toString());

В выводе, который я вижу для this.notes в строке 3, отсутствует исходный текст из this.notes в строке 2. Вот что я вижу в devTools для this.notes в строке 3 при отладке:

"IdNumber: 524242

" 

при наведении курсора на this.notes в строке 2 в devTools это выглядит так:

"testing

 testing 2

 testing 3"

Я надеялся, что this.notes в строке 3 будет выглядеть так:

"IdNumber: 524242

 testing

 testing 2

 testing 3"

Что я делаю не так?

Строковые объекты в JavaScript очень редко бывают полезными. Они не совпадают со строковыми примитивными значениями.

Pointy 23.11.2022 15:10

Пожалуйста, предоставьте автономный минимальный воспроизводимый пример, который демонстрирует вашу проблему при вставке в автономную IDE. Прямо сейчас контекст this отсутствует, поэтому трудно понять, что происходит. Я согласен с тем, что new String(...) почти наверняка не то, что вы хотите сделать; вместо этого вы можете использовать просто String(...). Но без возможности воспроизвести проблему, это всего лишь догадки.

jcalz 23.11.2022 15:13

Было бы полезно, если бы вы могли объяснить, что вы пытаетесь получить, чего "IdNumber: " + this.IdNumber + this.notes вам не даст.

Pointy 23.11.2022 15:13

Этот код может быть не очень хорошим, но я только что понял, что допустил ошибку и установил this.notes в отдельном месте, которое перезаписывало то, что было установлено здесь. По-прежнему было очень полезно увидеть, как использовать литералы шаблонов вместо объектов String.

Rich 23.11.2022 17:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
54
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я думаю, что более эргономичным (если не идиоматичным) подходом было бы использование шаблонных литералов, например:

Код на TypeScript Playground

const example = {
  IdNumber: 524242,
  notes: 'testing\n\ntesting 2\n\ntesting 3',
  update () {
    this.notes = `IdNumber: ${this.IdNumber}\n\n${this.notes}`;
  },
};

console.info(example.notes); // "testing\n\ntesting 2\n\ntesting 3"
example.update();
console.info(example.notes); // "IdNumber: 524242\n\ntesting\n\ntesting 2\n\ntesting 3"

Для конкатенации строк рекомендуется* использовать шаблонные литералы

let string1 = `IdNumber: ${this.IdNumber}`;
let string2 = `${this.notes}`;
this.notes = `${string1}${string2}`

* https://eslint.org/docs/latest/rules/prefer-template

Другие вопросы по теме