Javascript значение get переменных

Получить значение переменной из адресной строки на JavaScript

Иногда бывает нужно получить переменную из текущего url в программе JavaScript. Получить значение всего url можно легко, просто прочитав document.location, но что если в адресе есть много переменных, а нужна одна конкретная.

Получить значение нужной переменной из текущего адреса на JavaScript

Выполнить эту задачу можно с помощью нехитрой простой функции:

var test = getURLVar('test'); function getURLVar(key) < var query = String(document.location.href).split('?'); if (query[1]) < var part = query[1].split('&'); for (i = 0; i < part.length; i++) < var data = part[i].split('='); if (data[0] == key && data[1]) return data[1]; >> return ''; >

Если переменной в запросе нет или ее значение не задано, функция вернет пустую строку.

Другой вариант, более продвинутый, так сказать, получения переменной из url:

var test = getURLVar('test'); function getURLVar(key) < var vars = location.search.substr(1).split('&').reduce(function(res, a) < var t = a.split('='); res[decodeURIComponent(t[0])] = t.length == 1 ? null : decodeURIComponent(t[1]); return res; >, <>); return varsJavascript значение get переменных ? varsJavascript значение get переменных : ''; >

Получить get переменные из текущего адреса в виде массива на JavaScript

Очень полезная функция, код которой предложил Андрей в комментариях ниже, за что ему спасибо.

function getURLVarArr() < var data = []; var query = String(document.location.href).split('?'); if (query[1]) < var part = query[1].split('&'); for (i = 0; i < part.length; i++) < var dat = part[i].split('='); data[dat[0]] = dat[1]; >> return data; >

Эту же функцию с пояснениями можете посмотреть ниже в комментарии Андрея.

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

Получить адресную строку без указанной переменной на JavaScript

var url = getURLWithoutVar('test'); function getURLWithoutVar(key) < var url = ''; var vars = location.search.substr(1).split('&').reduce(function(res, a) < var t = a.split('='); if (key != decodeURIComponent(t[0])) url += '&' + a; >, <>); return url != '' ? location.origin + location.pathname + '?' + url.substr(1) : location.href; >

Если переменной в адресной строке нет, тогда функция вернет всю строку со всеми переменными.

Источник

Получение значений из параметров GET в JavaScript

Зачастую, веб-разработчики сталкиваются с необходимостью получения значений из параметров GET в URL. Допустим, есть адрес вида:

www.example.com/page.html?param1=value1¶m2=value2¶m3=value3 

Задача — извлечь значение параметра param3 , которое в данном случае равно value3 .

Решение с использованием встроенного API URLSearchParams

Одним из самых простых и эффективных способов извлечения значений параметров GET является использование встроенного API URLSearchParams . Этот API предоставляет удобные методы для работы с параметрами URL.

Вот пример кода, который решает поставленную задачу:

let url = new URL("http://www.example.com/page.html?param1=value1&param2=value2&param3=value3"); let params = new URLSearchParams(url.search); let param3 = params.get('param3'); // "value3"

В этом примере создается новый объект URL , а затем извлекаются параметры с помощью свойства search . Затем создается объект URLSearchParams , который может прочитать эти параметры. И в конце получаем значение параметра param3 с помощью метода get .

Альтернативное решение без использования URLSearchParams

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

let url = "http://www.example.com/page.html?param1=value1&param2=value2&param3=value3"; let params = url.split('?')[1].split('&'); let param3; for(let i = 0; i < params.length; i++) < let pair = params[i].split('='); if(pair[0] == 'param3') < param3 = pair[1]; >>

Здесь мы разбиваем URL на части, а затем перебираем все пары ключ-значение, ищем нужный ключ и извлекаем его значение.

Оба этих подхода позволяют успешно извлекать значения параметров GET из URL в JavaScript.

Источник

getter

Синтаксис get связывает свойство объекта с функцией, которая будет вызываться при обращении к этому свойству.

Интерактивный пример

Синтаксис

Параметры

Имя свойства для привязывания к заданной функции.

Начиная с ECMAScript 6, вы также можете использовать выражения для вычисляемого имени свойства для привязки к заданной функции.

Описание

Иногда желательно разрешить доступ к свойству, которое возвращает динамически вычисляемое значение, или вы можете захотеть отражать состояние внутренней переменной без необходимости использования явных вызовов методов. В JavaScript, это можно реализовать при помощи использования геттера.

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

Учтите следующее при работе с синтаксисом get :

• Он может иметь идентификатор, который является либо числом, либо строкой;
• Он должен иметь ровно 0 параметров (смотрите Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments для доп. информации);
• Он не должен появляться в объектном литерале вместе с другим get или через ввод данных для того же свойства ( < get x() < >, get x() < >> и < x: . get x() < >> запрещены).

Геттер можно удалить при помощи оператора delete .

Примеры

Определение геттера на новом объекте в момент инициализации этого объекта

Ниже создаётся псевдо-свойство latest для объекта obj , который выведет последний элемент массива в консоль лог.

const obj =  log: ['example','test'], get latest()  if (this.log.length === 0) return undefined; return this.log[this.log.length - 1]; > > console.log(obj.latest); // "test" 

Обратите внимание, что попытка присвоить значение latest не изменит его.

Удаление геттера оператором delete

Если вы хотите удалить геттер, используйте delete :

Определение геттера на уже существующих объектах с помощью defineProperty

Для добавления геттера к существующему объекту в любое время используйте Object.defineProperty().

const o = a: 0>; Object.defineProperty(o, 'b',  get: function()  return this.a + 1; > >); console.log(o.b) // Runs the getter, which yields a + 1 (which is 1) 

Использование вычисляемого именованного свойства

Примечание: Вычисляемые свойства являются экспериментальной технологией, частью предложений спецификации ECMAScript 6, и массовой поддержки браузерами пока нет. Код ниже вызовет синтаксическую ошибку в неподдерживаемых средах.

var expr = "foo"; var obj =  get [expr]()  return "bar"; > >; console.log(obj.foo); // "bar" 

Умные / самостоятельно перезаписывающиеся/ ленивые геттеры

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

Дополнительная техника оптимизации заключается в том, чтобы лениться или откладывать вычисление значения свойства и кешировать его для дальнейшего доступа. Так поступают умные или запоминающие геттеры. Значение вычисляется в первый раз при вызове геттера и затем сохраняется в кеше так, что последующие обращения будут возвращать кешированные значения без его пересчёта. Это полезно в следующих ситуациях:

• Если вычисление значения свойства дорого (занимает много оперативной памяти или процессорного времени, порождает рабочий поток, получает удалённый файл, и т. д.).
• Если сейчас это значение не нужно. Оно будет использоваться позже, или в некоторых случаях оно не используется вообще.
• Если оно используется, к нему будут обращаться несколько раз, и нет необходимости его пересчитывать, так как значение не будет изменено, или не должно пересчитываться.

Значит, вам не нужно использовать ленивый геттер для свойства, значение которого вы собираетесь менять потому, что геттер не будет пересчитывать значение.

В следующем примере у объекта есть геттер как собственное свойство. При получении свойства, свойство удаляется из объекта и вновь добавляется, но в этот раз неявно, как свойство с данными. В итоге значение возвращается.

get notifier()  delete this.notifier; return this.notifier = document.getElementById("bookmarked-notification-anchor"); >, 

Для Firefox смотрите также модуль XPCOMUtils.jsm , который определяет функцию defineLazyGetter() .

get и defineProperty

Использование ключевого слова get и Object.defineProperty() даёт похожие результаты, но при использовании в classes между ними есть тонкая разница.

При использовании get свойство будет определено в прототипе объекта, в то время, как при использовании Object.defineProperty () свойство будет определено в экземпляре, к которому применяется.

class Example  get hello()  return 'world'; > > const obj = new Example(); console.log(obj.hello); // "world" console.log(Object.getOwnPropertyDescriptor(obj, 'hello')); // undefined console.log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(obj), 'hello')); // < configurable: true, enumerable: false, get: function get hello() < return 'world'; >, set: undefined > 

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 17 июл. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

JavaScript: как получить get параметр

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

Функция для получения get:

Функция работает аналогично функции $_GET в PHP. Распознает массивы в гет параметрах.

function $_GET(keys) { function getElement(arr, keys) { let key = keys.shift(); return keys.length ? getElement(arrJavascript значение get переменных, keys) : arrJavascript значение get переменных; } function setElement(arr, keys, value) { let key = keys.shift(); if (keys.length) { arrJavascript значение get переменных = {}; setElement(arrJavascript значение get переменных, keys, value) } else { if (!key) { key = 0; while (key in arr) { key++; } } arrJavascript значение get переменных = value; } } let get = {}; window.location.search.slice(1).split('&').forEach(function(item) { let data = item.split('='); let key = data[0].replace(/\[.*/, ''); let value = data[1] ? data[1] : ''; if (data[0] !== key) { let subkeys = data[0].match(/(?<=\[).*?(?=\])/g); getJavascript значение get переменных = getJavascript значение get переменных ? getJavascript значение get переменных : {}; setElement(getJavascript значение get переменных, subkeys, value); } else { getJavascript значение get переменных = value; } }); if (keys) { return getElement(get, keys.constructor !== Array ? keys.split() : keys); } return get; }

Получение всеx get параметров в виде объекта: $_GET()
Получение значения get параметра: $_GET('param')
Получение значения get параметра массива, нужно указать вложенность в виде массива: $_GET(['param', 'key'])

Простая функция для получения get:

Данная функция позволяет получить значение определенного get параметра точно по ключу, массивы не распознает.

function $_GET(key) { var p = window.location.search; p = p.match(new RegExp(key + '=([^&=]+)')); return p ? p[1] : false; }

Например, ваш url из которого нужно получить get выглядит так: http://frontblog.ru/index.php?page=1

Для того чтобы получить значение параметра page вставляете в свой скрипт $_GET('page') и данная функция вернет вам 1 , что является значение параметра page .

Если параметра page не окажется на странице, то функция $_GET('page') вернет false .

Функция для получения всех get параметров в виде массива:

Рассмотренная выше функция позволяет получить определенный параметр по ключу, но можно получить все параметры сразу и записать их в переменную и далее использовать их как душе угодно, массивы эта функция не распознает. Пример такой функции:

var gets = (function() { var a = window.location.search; var b = new Object(); a = a.substring(1).split("&"); for (var i = 0; i < a.length; i++) { c = a[i].split("="); b[c[0]] = c[1]; } return b; })();

Данная функция получает все get параметры и записывает их в переменную gets . Для получения параметра page нужно написать так gets['page'] . Плюс такого способа только в том, что функция выполнится один раз и у вас будут все параметры в виде ассоциативного массива.

Например, для url http://frontblog.ru/index.php?page=1&item=2 массив будет выглядеть так:

var gets = { "page" : "1", "item" : "2" }

Ключами являются page и item . По ним и происходит поиск нужного значения: gets['page'] вернет 1 , gets['item'] вернет 2 .

Какой функцией воспользоваться решать вам. Также буду рад предложениям подобных функций в комментариях.

Источник