JavaScript | Как обратиться к свойству объекта через строку в переменной?

JavaScript | Как обратиться к свойству объекта через строку в переменной?

Как подставить «строковое имя» ключа свойства объекта из какой-то переменной для получения значения свойства объекта?

 

Задача. В чём суть проблемы?

У нас есть объект:

let supercar = {
  colorEN: 'red',
  colorRU: 'красный',
  speed: 350,
  brandEN: 'Bugatti',
  brandRU: 'Бугатти'
}
JavaScript объект с мультиязычными ключами
JavaScript объект с мультиязычными ключами

Представьте что у нас мульти-язычный сайт, и мы динамически подтягиваем содержимое из релевантных ключей объекта. То есть мы динамически формируем контент документа на сервере исходя из запроса от клиента.

Если бы задача была простой, то мы бы сразу обращались за нужным свойством, например за свойством «speed» (скорость). Выглядело бы это так:

supercar.speed
350
supercar.speed 350
supercar.speed 350

Тут всё просто, потому что числа не зависят от языка.

Но представим, что наш пользователь посещает ресурс на котором перечислены 100 супермашин:

my-site.ru/supercar/RU

Из запроса мы получаем язык пользователя:

RU

Теперь сервер должен как-то понять из каких свойств у 100 объектов нужно подтягивать содержимое на языке пользователя. Вот тут и начинается проблема!

Мы не можем в обработчике написать какой-то один вид обращения к свойству объекта так как пользователи из разных стран будут запрашивать разные принадлежности к языку. Нам нужно какое-то универсальное решение.

 

Решение

Теперь давайте представим, что из запроса мы получаем язык, а от схожих свойств одинаковую часть. Например, кусочек «brand» или кусочек «color«. В результате мы имеем переменные со строковыми значениями:

let c = 'color'

let b = 'brand'

let lang = 'RU'

Складывая переменные между собой мы будем получать нужные нам строковые КЛЮЧИ для первоначального объекта supercar

Но выглядеть это будет не как строки, а как выражения:

c + lang

b + lang

В таком виде нельзя подсунуть через точечное обращение к свойству объекта. Будет неправильный результат:

supercar.c + lang
'undefinedRU'

supercar.b + lang
'undefinedRU'

 

Неправильное обращение к свойству объекта JavaScript через точечную нотацию
Неправильное обращение к свойству объекта JavaScript через точечную нотацию

Так как быть?

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

supercar[c + lang]
'красный'

supercar[b + lang]
'Бугатти'
Обратились к свойству объекта через конкатенацию значений двух переменных - JavaScript
Обратились к свойству объекта через конкатенацию значений двух переменных — JavaScript

 

Информационные ссылки

Стандарт ECMAScript — https://tc39.es/ecma262/