null value not be evaluated in JavaScript ternary operation - ecmascript-6

Question

I have a javascript game with this function that displays data when the user hovers over a certain element.
This is what it looks like:
gameRendering: function (game, e) {
var playerCharacterTitle = game.playerCharacterTitle;
$(user).hover({
content: '<b>Game Characters</b>'
+ (playerCharacterTitle) !== null ? '<b>PC Name:</b> ' + playerCharacterTitle : ''
});
When variable named, playerCharacterTitle, is NOT null, I want it to display this: "PC Name: {the_name}" and when the name is null, I want it to display nothing.
Like this:
PC Name: Gorak
PC Name: LeMara
But for some reason, it's still displaying "PC Name:" and then a 'null'... like this:
PC Name: Gorak
PC Name: null
PC Name: LeMara
PC Name: null
I am getting no errors, just results that I don't like.
What could I be doing wrong?
Thanks!

Answer 1

You have forgotten to put the brackets (a so called operator precedence rules):
gameRendering: function (game, e) {
var playerCharacterTitle = game.playerCharacterTitle;
$(user).hover({
content: '<b>Game Characters</b>'
+ (playerCharacterTitle !== null ? '<b>PC Name:</b> ' + playerCharacterTitle : '')
});
function gameRendering(game, e) {
var playerCharacterTitle = game.playerCharacterTitle;
//$(user).hover({
var content = '<b>Game Characters</b>'
+ (playerCharacterTitle !== null ? '<b>PC Name:</b> ' + playerCharacterTitle : '')
//});
console.log(content)
}
gameRendering({playerCharacterTitle: null}, 'a');
gameRendering({playerCharacterTitle: "SomeName"}, 'a');